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

以下是 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
 }

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值。< / p>

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]);
}

Demo

Answer 4

或许有点晚了，但我刚才遇到了同样的问题，想要一个基于原始方法的解决方案，使用jQuery。

不幸的是链接的数据属性不是以这种方式传输的，但是我们可以通过索引从链接中检索它（对于id =“links”的链接必须有一个容器元素）：

$('#blueimp-gallery')
    .on('slide', function (event, index, slide) {
    var unique_id = $("#links").children().eq(index).data('unique-id');
    console.log('unique_id: ' + unique_id);
});

blueimp gallery加载动态内容

4 个答案:

将这些行添加到您的js：

编辑：