jquery – blueimp gallery加载动态内容

我已成功将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>

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

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

我在这里找不到unique-id.是吗？还是有其他方式传递这些数据？

解决方法

这是 Working Demo,

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

将这些行添加到您的js：

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

原文地址：https://www.jb51.cc/jquery/178698.html