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?
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