Home/ Questions/Q 7761841
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T14:14:23+00:00

I’m using a jQuery image gallery (in this case, FlexSlider ) to present several

  • 0

I’m using a jQuery image gallery (in this case, FlexSlider) to present several galleries on a page. Only one can be viewed at a time. To accommodate this, I’m using fadeIn/fadeOut after clicking a thumbnail. The problem is the gallery breaks. I’ve tried several, and they break in different ways. I’m sure there is a way to kind of ‘reset’ the plugin to keep it from breaking. Here’s what I’m doing, which, when presenting multiple sliders on a page, should work according to the site:

jQuery:

<script type="text/javascript" charset="utf-8">
      $(window).load(function() {

        $('#main-slider').flexslider({
        animation:'fade',
        directionNav:true,
        controlsContainer: ".flex-container"
        });

        $('#secondary-slider').flexslider({
        animation:'fade',
        directionNav:true,
        controlNav:true,
        controlsContainer: ".flex-container"
        });

      });

      $(function(){
        $('#main-slider,#secondary-slider').hide();

//1//       

  $('.gal_icon_1').click(function(){
        $('#secondary-slider').fadeOut(function(){
        $('#main-slider').fadeIn();
        });
  });

//2//

   $('.gal_icon_2').click(function(){
        $('#main-slider').fadeOut(function(){
        $('#secondary-slider').fadeIn();
        });
  });

    });
    </script>

html:

<div class="container">
    <div id="main-slider" class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/BVL_CHANDRA-B_MM_2010_A3.jpg" />
            </li>
            <li>
                <img src="images/BVL_CHANDRA-BLUE_MM_2010_A3.jpg" />
            </li>
            <li>
                <img src="images/BVL_JEWELS_MM_2010_A3.jpg" />
            </li>
        </ul>
    </div>

As to simply fade one slider out and fade the other in. But when I do, it gets wonky. So, again, is there a way to kind of ‘reset’ the slider to get it to work on each div?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe the problem is the fact that you initialize the sliders, then hide them.

    The plugin code starts up and begins the animating process, and then attempts to animate on elements that are hidden. This causes jQuery to break down.

    Download the latest code from GitHub (https://github.com/woothemes/FlexSlider/) and your issue should be fixed with your current implementation. I recently added prevention logic to stop the slider from performing actions if the slider is not visible.

    • 0