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