Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How does Markup combined with JS API work in Fresco?

edited August 2016 in Fresco

Hello Nick Stakenburg,

we've recently purchased the unlimited licenese of the pro Version of Fresco.

Now I have a markup looking like this:

<a href="linktoimage01.jpg" data-fresco-caption="bla bla 01" class="fresco" data-fresco-group="g01" data-fresco-group-options="thumbnails: false, ui: 'inside'">
<a href="linktoimage02.jpg" data-fresco-caption="bla bla 02" class="fresco" data-fresco-group="g01" data-fresco-group-options="thumbnails: false, ui: 'inside'">
<a href="linktoimage03.jpg" data-fresco-caption="bla bla 03" class="fresco" data-fresco-group="g01" data-fresco-group-options="thumbnails: false, ui: 'inside'">

So far so well. Now what I want is, that I want to know when the lightbox is opened and when the lightbox is closed. How am I able to give both links the same callback for onShow and afterHide? Is this supported via HTML? And if not - how would I be able to give a set of images that need to be shown i.e.

Fresco.show(['linktoimage01.jpg', 'linktoimage02.jpg', 'linktoimage03.jpg'], { onShow: function() { showFrescoHandler(); }, afterHide: function() { hideFrescoHandler(); } }); 

but start with image 02 instead of the first one - because it was clicked somewhere?

Thanks very much in advance!

Yours sincerely,
Daniel

Comments

  • edited August 2016

    Grouped options go on the data-fresco-group-options attribute for html. You can put callbacks on there just like in javascript.

    The last arguments in Fresco.show() is the position, use:

    Fresco.show([
      'linktoimage01.jpg',
      'linktoimage02.jpg',
      'linktoimage03.jpg'
    ], {
      onShow: showFrescoHandler,
      afterHide: hideFrescoHandler
    },
    2 // position
    ); 
    

    If an element on the page already has a fresco class, give it an id and you can show it with the API like this:

    Fresco.show($('#elementid')[0]);
    

    No need to recreate it in javascript:

Sign In or Register to comment.