Question

I am using jquery cycle for a slideshow. I cannot change the html code given and the elements in the pager (li html elements as seen below) have to pause and resume the slideshow on mouseover and mouseout events.

The behavior is implemented but, when then slideshow is paused and then resumed the images start to change every second (?) and then at random intervals – while i have specified a 5 second timeout.

Anyone knows what seems to be causing the problem, and after a cycle(‘resume’) the slideshow starts to change images disregarding the timeout i have set?

Here is the html code (which i cannot change):

 <div class="inner homeSlider">
     <div class="img-wrap">
     <!-- image list for the slideshow  -->
    <a href="http://asdasd" target="_self">
     <img src="image1.jpg" alt="" border="0" />
    </a>

        <a href="http://www.google.com" target="_self">
      <img src="image2.jpg" alt="" border="0" />
    </a>

        <a href="http://www.atcom.gr" target="_blank">
    <img src="image3.jpg" alt="" border="0" />
    </a>
    </div>


    <-- following elements will have to be used as the 'pager' for jquery cycle -->
    <ul class="feature">
        <li id="hSlider-1" class="selected">
          <dl>
            <dt><a href="http://example.com" target="_self">PAGE 1</a></dt>
            <dd><a href="http://example.com" target="_self">some text</a></dd>
          </dl>
        </li>
        <li id="hSlider-2" class="selected">
            <dl>
            <dt><a href="http://www.google.com" target="_self">PAGE 2</a></dt>
            <dd><a href="http://www.google.com" target="_self">some text</a></dd>
            </dl>
        </li>

                <li id="hSlider-3" class="selected">
           <dl>
             <dt><a href="http://www.google.com" target="_blank">PAGE 3</a></dt>
             <dd><a href="http://www.google.com" target="_blank">some text</a></dd>
           </dl>
        </li>
    </ul>
</div>

The javascript

var cycleTimeOut = 5000;
    var cycleSpeed = 500;
    var ispaused = false;

    function setSelectedPager(slideIndex){ 
            var idStr = 'hSlider-' + (slideIndex+1);
            $('div.homeSlider ul.feature li').removeClass('selected');
            $('div.homeSlider ul.feature li#' + idStr).toggleClass('selected');
    }

    function aftercallBack(currSlideElement, nextSlideElement, options, forwardFlag) { 
        if(!isNaN(options.currSlide) && !ispaused) {    
            setSelectedPager(options.currSlide);            
        }
    }

    var jqcycle = $('div.homeSlider div.img-wrap').cycle({
    fx:'fade', 
    speed:cycleSpeed, 
    timeout:cycleTimeOut,
    pause:1,
    after:aftercallBack 
    });

    /* On mouse over/out the pager must pause/resume the slide show and set the 
       appropriate CSS class
    */
    $('div.features div.homeSlider ul.feature li').mouseover(function(e){ 

            var id = $(this).attr('id');
            var parts = id.split('-');
            var slideIndex = (!isNaN(parts[1])) ? parts[1] : 1;

            if(!ispaused){ 
                $('div.homeSlider div.img-wrap').cycle('pause');                
                $('div.homeSlider div.img-wrap').cycle(slideIndex-1);       
                setSelectedPager(slideIndex);
                ispaused = true;
            }
    });

    $('div.features div.homeSlider ul.feature li').mouseout(function(e){ 

            var id = $(this).attr('id');
            var parts = id.split('-');
            var slideIndex = (!isNaN(parts[1])) ? parts[1] : 1;

            if(ispaused) { 
                $('div.inner ul.feature li#' + id).removeClass('selected'); 
                $('div.homeSlider div.img-wrap').cycle('resume');

                ispaused = false;
            }
    });

Answer 1

I don’t know if it’s directly causing your timing issue, but I think you might have a problem with the order in which your toggleClass and removeClass are being executed. I’d try passing the current slide as a variable identified in your aftercallBack:

function aftercallBack(currSlideElement, nextSlideElement, options, forwardFlag) { 
    if(!isNaN(options.currSlide) && !ispaused) {    
        var toRemove = $(".selected");
        setSelectedPager(options.currSlide, toRemove);            
    }
}

function setSelectedPager(slideIndex, removeFrom) {
    var idStr = 'hSlider-' + (slideIndex+1);
        removeFrom.removeClass('selected');
        $('div.homeSlider ul.feature li#' + idStr).toggleClass('selected');
}