Search code examples
javascripthtmlfotorama

adding extra data into fotorama img tag

I'm using http://fotorama.io/ to display gallery, with thumbnails option. I would like to add some extra data into img tag, but fotorama seems to remove it. Here is my code:

  <div class="fotorama"
       data-nav="thumbs"
       data-allowfullscreen="native"
       data-thumbwidth="150"
       data-thumbheight="118"
       data-thumbmargin="20"
       >
    {{#photos}}
      <a href="{{url}}" data-thumb="{{thumbnail}}" data-extradata="{{somedata}}"></a>
    {{/photos}}
  </div>

{{#photos}}{{/photos}} is just Handlebars.js loop.

Any suggestions how could I add some data into image, to access it later from javascript?

Solution

  • there is an event indicating that fotorama is ready. Callback method has second parameter in which there is an object with data:

    $('.fotorama').on('fotorama:ready', function (e, fotorama, extra){
  console.log(fotorama.data[index].extradata);
});

    PD: Edited for fixed parentheses