添加额外的数据到 fotorama img 标签

Question

我正在使用 http://fotorama.io/ 显示画廊，带有缩略图选项。我想在 img 标签中添加一些额外的数据，但 fotorama 似乎将其删除。这是我的代码：

  <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}} 只是 Handlebars.js 循环。

关于如何将一些数据添加到图像中以便稍后从 javascript 访问它的任何建议？

Answer 1

有一个事件表明 fotorama 已准备就绪。回调方法有第二个参数，其中有一个带有数据的对象：

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

PD：针对固定括号进行了编辑

添加额外的数据到 fotorama img 标签

adding extra data into fotorama img tag

html

javascript

fotorama