CODEWITHSUNDEEP
jqueryflexsliderlightbox2
Sami-Petri Salonen
Sami-Petri Salonen

Reputation: 1

Flexslider + Lightbox 2 gallery image doubling issue

I'm using flexslider and inside every slide lightbox 2 image gallery.

The problem is when I set up the flexslider "animationLoop: true" lightbox doubles first and last slides gallery images.

When I set "animationLoop: false" the problem is gone.

I noticed that the problem comes from the flexslider "clone" slides. Flexslider "clones" the last and first slide - to create the "loop" effect. Same time lightbox picks up the "real" slides + "clone" slides to generates all necessar galleries - and making the first and last slides images in double.

Has anyone got simple solution to fix this - because I wanted to use this Loop effext in flexslider?!

Here is a sample code of flexslider using "animationLoop: true" and "clone" slides + lightbox 2 inside slides.

 $('#customers-carousel').flexslider({
                        animation: "slide",
                        controlNav: false,
                        directionNav: true,
                        animationLoop: true,
                        slideshow: false,
                        prevText: "",       
                        nextText: "", 
                        itemMargin: 0,
                        itemWidth: 300
                  })

<div class="flex-viewport"> 
<ul class="slides">
    <li class="clone">
        <p><a href="images/image-4.png" rel="lightbox" data- lightbox="gallery4" data-title="title-image-4"><img src="images/image-4-thumb.png"></a></p>
    </li>
    <li>
        <p><a href="images/image-1.png" rel="lightbox" data-lightbox="gallery1" data-title="title-image-1"><img src="images/image-1-thumb.png"></a></p>
    </li>
    <li>
        <p><a href="images/image-2.png" rel="lightbox" data-lightbox="gallery2" data-title="title-image-2"><img src="images/image-2-thumb.png"></a></p>
    </li>
    <li>
        <p><a href="images/image-3.png" rel="lightbox" data-lightbox="gallery3" data-title="title-image-3"><img src="images/image-3-thumb.png"></a></p>
    </li>
    <li>
        <p><a href="images/image-4.png" rel="lightbox" data-lightbox="gallery4" data-title="title-image-4"><img src="images/image-4-thumb.png"></a></p>
    </li>
    <li class="clone">
        <p><a href="images/image-1.png" rel="lightbox" data-lightbox="gallery1" data-title="title-image-1"><img src="images/image-1-thumb.png"></a></p>
    </li>
</ul>

Upvotes: 0

Views: 1703

Answers (1)

ralbatross
ralbatross

Reputation: 2488

I got around this by turning off flexslider's animateLoop and resetting the animation manually:

var speed = 7000;
$('.flexslider').flexslider({  
    animationLoop: false,              // turn off animation loop
    slideshowSpeed: speed,
    end : function(slider) {
        setTimeout(function() { 
            slider.flexslider(0);      // reset to first slide
            slider.flexslider('play'); // restart the animation...
        }, speed);                     // ...after the same duration as slideshowSpeed
    }
});

Upvotes: 2

Related Questions