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
 }