Andrew Brown Andrew Brown - 1 year ago 395
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"

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>

I am using the
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

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

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

Answer Source

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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download