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?

Histone

does $(slide).data('unique-id') or slide.data('unique-id') not work? – Misery

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
 }

Dryer

data attributes can be accessed by .data method of jQuery instead of getAttribute('data-unique-id'). – Lubet

Yes , this.list[index] is a native javascript object ,so i am using getAttribute ,Simple. – Dryer

Answer 2

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

Lubet

I feel jQuery(this.list[index]) is unnecessary , it will be slower in performance , we can directly use getAttribute to fetch unique-id.. :) – Dryer

Answer 3

Use the following code to achieve your needs

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

Demo

Netty

I'm getting a Uncaught TypeError: Cannot read property '0' of undefined. from what I can tell you're not using it via the Jquery plugin, and I think that's what's causing this issue. if possible I'd like to still use the Jquery plugin – Histone

@AndrewBrown Could you please jsfiddle your code? Anyway try to console.log(this) to figure out where to find data. – Netty

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

Nicolas