blueimp图库加载动态内容

Question

我已经成功地在我的网站中实现了Blueimp图库，并且使用HTML5数据属性可以使lightbox工作。

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

Answer 2

您需要使用index参数值来访问anchor标记。

<script>
$(document).ready(function() {
    blueimp.Gallery(
        document.getElementById('links').getElementsByTagName('a'),
        {
            container: '#blueimp-gallery',
            carousel: true,
            onslide: function (index, slide) {
                // Callback function executed on slide change.
                var $anchor = jQuery('#links').find('a:eq(' + index + ')');
                console.log('unique-id value is : '  + $anchor.data('unique-id'));
            }
        }
    );
});

</script>

这里的链接是容器元素的id，其中放置了所有的标记。

示例标记

<div class="links" id="links">
    <a href="http://farm6.static.flickr.com/5101/13539971585_6c655628e5_b.jpg" title="La finestra" data-gallery="" data-unique-id="tmp_1">
        <img src="http://farm6.static.flickr.com/5101/13539971585_6c655628e5_s.jpg">
    </a>
    <a href="http://farm8.static.flickr.com/7058/13535332874_e1ffe2f14c_b.jpg" title="ONE OF MY FAVORITE PLACES IN NORWAY :)" data-gallery="" data-unique-id="2">
        <img src="http://farm8.static.flickr.com/7058/13535332874_e1ffe2f14c_s.jpg">
    </a>
    <a href="http://farm3.static.flickr.com/2832/13535035223_a31eb2c8a8_b.jpg" title="ghost stories and other urban legends" data-gallery="" data-unique-id="3">
        <img src="http://farm3.static.flickr.com/2832/13535035223_a31eb2c8a8_s.jpg">
    </a>
    <a href="http://farm4.static.flickr.com/3685/13539935244_3540cf2bfe_b.jpg" title="Esa Hora Del da" data-gallery="" data-unique-id="tmp_4">
        <img src="http://farm4.static.flickr.com/3685/13539935244_3540cf2bfe_s.jpg">
    </a>
    <a href="http://farm4.static.flickr.com/3760/13534581825_b32103f379_b.jpg" title="Jalapeo" data-gallery="" data-unique-id="5">
        <img src="http://farm4.static.flickr.com/3760/13534581825_b32103f379_s.jpg">
    </a>
    <a href="http://farm4.static.flickr.com/3705/13541202353_dc22b7de3b_b.jpg" title="Lady in The Flowers" data-gallery="" data-unique-id="tmp_6">
        <img src="http://farm4.static.flickr.com/3705/13541202353_dc22b7de3b_s.jpg">
    </a>
</div>

在下面的链接中查看工作演示，如果在编辑器中启用console选项卡，您将能够在那里看到unique-id data attribute值。

http://jsbin.com/yobenehu/1/edit

编辑：

我正在更新我的答案以使用this.list属性：

$(document).ready(function() {
    blueimp.Gallery(
        document.getElementById('links').getElementsByTagName('a'),
        {
            container: '#blueimp-gallery',
            carousel: true,
            onslide: function (index, slide) {
                // Callback function executed on slide change.
                var $anchor = jQuery(this.list[index]);
                var unique_id = $anchor.data('unique-id');
                console.log('unique-id value is : '  + unique_id);
            }
        }
    );
});

查看下面的工作演示链接

http://jsbin.com/yobenehu/3/edit

Answer 3

使用以下代码来满足您的需要

onslide: function (index, slide) {
  console.log(this.list[index]);
}

演示