Number of images not working correctly when using bxSlider with Lightbox

[zakruvalcaba]

I've found that when using Lightbox in conjunction with bxSlider, the number of images that Lightbox displays is completely off. For instance, I have 6 images in a bxSlider carousel but when I pop open one of those images through Lightbox, it says that there are 10. Worse, when I click on the 1st image, it says 8 out of 10. I click next three time and on the third image I can not click next again because Lightbox think I've reached the 10th image when in fact I'm only on the 3rd of 6 images. Is this a Lightbox issue or a bxSlider issue? Here's a link to the bxSlider/Lightbox implementation:

http://www.newtonforkranch.com/cabins-and-rates.html

[christianPBD]

anyone have thoughts on this issue? Im running into the same thing.

to be honest to inconsistency in numbering doesn't bother me too much, but the inability to scroll to the next lightbox image due to the inconsistency is bad.

for now, Ive disabled the previous/next option in lightbox, but would like to get it going again if possible.

[GxiGloN]

This issue may fix your problem : https://github.com/wandoledzep/bxslider/pull/94 ;)

[NiklasBr]

I just experienced this with version 4.1 . The hacky solution is to

1. Create a hidden div, and inside this div generate the same images as you generated in the bx slider.
2. On click on the image in the bx slider do not open a lightbox (return false), trigger a click on the corresponding image inside the hidden div.

[eenagy]

I had the same problem too.

Bx-slider clones another two links with lightbox rel attribute. (These are for navigating purpose). So after if you remove these attribute from bx-clone links with jquery it is just works fine.

[gctommy]

Same issue trying to get this working with magnific-popup.

Loading 10 images, but counter says 1 of 110 when lightbox/popup opens.

[NiklasBr]

So, I revisit this issue and think I have a possible solution or two (no code tested yet, sorry).

Because BXslider duplicates the original images for its carousel to make it look seamless to the user other code will be confused as to the number of items the user expects to be in the DOM.

Possible solution 1, this solution does not depend upon

Create a hidden DOM tree with those elements we want in the lightbox (or reference otherwise). And clicking on the carousel will trigger links in this hidden DOM rather than the carousel's DOM.

Possible solution 2, depends upon changes to BXslider

BXSlider indicates which DOM items are the original items and which are clones, this allows us to ignore the clones using something like

$('.selector').not('.bx-clone').doStuff();

[luke-underwood]

@tgc123 I finally got it working with Magnific-Popup in gallery mode.

In my Magnific-Popup call I had to delegate only the slides that weren't clones. I did this this selecting all the list items that didn't have the class bx-clone like this:

$('.bxslider').each(function(){
    $(this).magnificPopup({
        delegate: 'li:not(.bx-clone) a',
        type: 'image',
        gallery: {enabled: true}
    });
});

Then in my bxSlider call I used the onSliderLoad callback I attached a click function to clone links that:

1. Prevents the default event behaviour (so it doesn't navigate to the image url)
2. Gets the href of the link
3. Selects the real slide by looking for another slide with the same href and is not a clone
4. Gets the index of the real slide
5. Tells magnific-popup to open the slide at the index i.e.

slider = $('.bxslider').bxSlider({
    // Callback that fires when bxSlider loads
    onSliderLoad: function(){
        // Event fires when you click on a clone slide
        $('.bx-clone a').click(function(event){
            // Prevent click event for clone slides
            event.preventDefault();
            // Get the href attribute (url) of the clone slide image
            urlOfImage = $(this).attr('href');
            // Select the real slide by looking for a matching href attribute
            realSlide = $(".bxslider li").not(".bx-clone").has('a[href="'+urlOfImage+'"]');
            // Get the index of the real slide
            realSlideIndex = $('.bxslider li').not(".bx-clone").index(realSlide);
            // Tell magnific-popup to open the slide at the index
            $(this).parents('.bxslider').magnificPopup('open', realSlideIndex);
        });
    }
});

I have no experience with Lightbox, but it might be possible to adapt this fix...

[Valentyn-Kubrak]

when you using bxslider , it creates additional

elements, just change calculation. replace this.imageArray.length with jQuery("#more-views-list > li").not('.bx-clone').length

[Roemer]

My solution for this problem is to remove the data-lightbox attribtue of all clones. I do this after the slide has loaded with this code:

onSliderLoad: function(){
    $(".bx-clone").children().removeAttr("data-lightbox");
}

Maybe you could add this to bxslider immediately when it clones an element?