blueimp gallery loading dynamic content

blueimp, jquery

Solution

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
 }

Problem

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?

Original source