Andrew Brown Andrew Brown - 4 months ago 162
jQuery Question

blueimp gallery loading dynamic content

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

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
 }