blueimp gallery加载动态内容

Question

我已成功将Blueimp Gallery实施到我的网站中,并且使用HTML5数据属性可以使灯箱工作.

<a href="multimedia/3.jpg"
    data-gallery=""
    data-title="Caption"
    data-unique-id="3"
    data-thumbnail="multimedia/3.jpg"></a>

我使用它来加载许多图片,用户可以在它们之间循环(滑动).图片可能包含与其关联的评论以及用户可以采取的不同操作.我已将评论框添加到图库中

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <div class="comments"></div>
</div>

我正在使用该slide事件,我希望能够使用幻灯片的相应注释更新注释框.我无法访问data-unique-id.

$("#blueimp-gallery").on('slide', function (event, index, slide) {
    console.log(event);
    console.log(index);
    console.log(slide);
});

我根本找不到unique-id.是吗？还是有另一种传递这种数据的方法？

Answer 1

这是工作演示,

你的代码看起来很好,只需data-unique-id要从元素中访问属性getAttribute,你就可以了.

将这些行添加到您的js:

onslide: function (index, slide) {
       var unique_id = this.list[index].getAttribute('data-unique-id');
       console.log(unique_id); //your unique id
 }