gallery array length miscalculated

[youngmicroserf]

Hi -

I'm opening a colorbox gallery via a separate link as explained in the FAQ. It works fine, except that, for some reason, the opened colorbox always gives a gallery array length that exceeds the actual amount of rel="abc" selectors. Say there's three anchors and images in the document with the respective selector, then the opened colorbox will have an array of five images, the first two being added again at the end of the array.

This is the code I'm using to call the gallery (on a touchswipe-slider "tap" event) -

var $gallery = jQuery("a[rel=gal_link]").colorbox(); $gallery.eq(0).click();

And this is the selector code -

<a class="cboxgrouped cboxElement" rel="gal_link" href="'.$image_full[0].'"><img src="'.$image_medium[0].'" alt=".$caption." title="'.$caption.'" /></a>

Is this a bug? I assume I'm doing something wrong, maybe someone has an idea how to fix this problem.

Thanks!

[jackmoore]

the opened colorbox always gives a gallery array length that exceeds the actual amount of rel="abc" selectors

My guess is that Colorbox (jQuery) is correct when determining how many elements in your document match your selector. I feel like you probably overlooked something, or that you have some invalid markup that is being fixed by the browser in a way you didn't anticipate. Can you provide a demo of this behavior?

[youngmicroserf]

Many thanks for the quick reply! There's really only three selectors in the document. But the error is not really limiting the functionality of the page, it's just a little confusing, so I'll put it online tonight with the current behaviour. Will get back to you with the link then. Thanks again!

[youngmicroserf]

Hi again - the page is online now, you can have a look at the problem at, eg,

http://kunst-mentoring.de/archives/kuenstlerinnen/schneider-kathrin

If you look at the slider, you'll see three navigation points (top left of slider). If you click on the image and open colorbox, you'll see that the gallery shows "Image 1 of 5", and I can only find three selectors in the source code.

Thanks for your help!

[jackmoore]

Try opening your browser's developer console and run the following: jQuery("a[rel=gal_link]"). It finds 5 elements. Colorbox wouldn't have anything to do with this, so I'm assuming liquid-slider is probably cloning elements for it's own purposes.

[jackmoore]

Quick suggestion, maybe you could store the jQuery collection you want to use with Colorbox before assigning the liquid-slider. Here's an example (replaces your current code blocks for assigning liquid-slider and colorbox):

jQuery(function(){
    var $gallery = jQuery("a[rel=gal_link]");

     jQuery("#art_slider").liquidSlider({
        autoHeight: true,
        autoSlide: true,
        dynamicTabsPosition: "top",
        responsive: true,
        responsive: true,
        swipe: true,
        slideEaseDuration: 500,
        slideEaseFunction: "linear",
        slideEaseFunctionFallback: "swing",
        continuous: true,
        swipe:false
    });

  $gallery.colorbox();

  var ls_api = jQuery.data( jQuery("#art_slider")[0], "liquidSlider");

  jQuery("#art_slider .ls-panel").swipe({
        excludedElements: "button, input, select, textarea, .noSwipe",
        swipeLeft: function() {
            ls_api.setNextPanel("right")
        },
        swipeRight: function() {
            ls_api.setNextPanel("left")
        }, 
          tap: function(event){
            event.preventDefault();
            if ( window.innerWidth > 768 ) {
                $gallery.eq(0).click();
                }
            else {
                //console.log(window.innerWidth);
                $gallery.eq(0).click();
                //console.log($gallery);
                }
            }
        });
});

I can't be positive that will be a complete fix because I don't know how often liquid-slider rebuilds the DOM after it is called (if ever), but I expect it to work.

[youngmicroserf]

That's great! Thanks a lot for the suggestion! And for colorbox, of course!

[jackmoore]

Notice that I create $gallery first, then assign liquidSlider, then assign Colorbox. If Colorbox had simply been assigned before liquidSlider you would probably have the same problem because liquidSlider would clone the elements Colorbox had been assigned to.

[youngmicroserf]

Thanks again! I've updated the code for the link I gave above and was hoping it would work. And it kind of does! But here's the weird thing - while the console shows me the three-element array instead of the previous five-element array when I log $gallery, from the setup to after the variable/colorbox is called by the tap event - but the colorbox still counts to five.

[jackmoore]

Oh... remove the cboxElement class from your links. That's something that Colorbox adds itself when it's been assigned, as an efficient way of keeping track of which elements in the DOM it has modified. Colorbox is going to think it's been assigned to any element that has that class, which includes the links cloned by liquidSlider since that class was present before liquidSlider is assigned.

[youngmicroserf]

And another round of thanks! That's it. Works like a charm now!