blueimp gallery loading dynamic content

Question

I have successfully implemented Blueimp Gallery into my website, and using HTML5 data attributes am able to get the lightbox to work.

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

I use this to load many pictures, and users can cycle (slide) between them. Pictures may have comments associated with them and different actions the user can take. I have added the comment box to the Gallery with

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

I am using the slide event, and I want to be able to update the comment box with the appropriate comments for the slide. I'm having trouble accessing the data-unique-id.

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

I can't find unique-id in here at all. is it? or is there another way to pass this data?

Answer 1

Here is the Working Demo,

Your code looks to be fine , just needed to access the data-unique-id attribute from the elements using getAttribute and you are good to go.

Add these lines to your js :

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

Answer 2

Use the following code to achieve your needs

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

Demo

Answer 3

You will need to use index parameter value to access the anchor tag.

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

here links is the id of the container element where all a tags are placed.

Example Markup

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

Check below link for the working demo, if you enable console tab in the editor, you will be able to see the unique-id data attribute value there.

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

EDIT:

I am updating my answer to use this.list property:

$(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);
            }
        }
    );
});

Check below link for working demo

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

Answer 4

A bit late perhaps, but I ran into the same problem just now and wanted a solution based on the original approach using jQuery.

Unfortunately the data attributes of the links are not transmitted this way, but we can retrieve it via index from the links (there must be a container element for the links with 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);
});