Calling Show() During a Transition

[rkralston]

The navigation API is working very well for me. I have three hot spots below the slider. When I mouseenter one of them, I want to change the 0th image, show it, and stop playing. Then on mouseleave I want to restore the 0th image and resume play.

All this works fine until I mouseenter while the slider is in transition. It show the 1th (is that a designation?) slide and stops.

Can upload page if needed.

[ryanflorence]

You can see here that any calls to show should be ignored while in transition:

https://github.com/rpflorence/jquery-rf-slideshow/blob/master/src/jquery.rf.slideshow.js#L48

Not sure what your code looks like to control the slideshow, but yeah, if it's in transition, and you call show, it should ignore it.

[rkralston]

    var slideshow = $("#slideshow").slideshow({
      // every option
      transition: 'fade', // blind(direction, fade, ease)
      selector: '> *', // which elements in #slideshow to be the slides
      initialIndex: 0, // index of element to show at first
      autoStyle: true, // handle some basic styles for you
      autoPlay: true, // don't cycle
      delay: 4000, // ms between transitions when autoPlay is true
      duration: 800, // duration of a transition
      show: function(event, params){
        //console.log( params );
      },
      showComplete: function(event, params){
        //console.log(params);
      }
    }).data('slideshow');

    //know hover
    $("#know").mouseenter(function(){
        //$(".featured:visible").delay(800).fadeOut(1000, 'linear');
        $("#main_image").attr('src', 'images/know_feature.png');
        if(slideshow.transitioning){
            setTimeout(slideshow.show(0), 800);
            slideshow.stop();        
        }
        else{
            slideshow.show(0);    
            slideshow.stop();        
        }
    });

    //defend hover
    $("#defend").mouseenter(function(){
        //$(".featured:visible").delay(800).fadeOut(1000, 'linear');
        $("#main_image").attr('src', 'images/defend_feature.png');
        slideshow.show(0);            
        slideshow.stop();        
    });

    //share hover
    $("#share").mouseenter(function(){
        //$(".featured:visible").delay(800).fadeOut(1000, 'linear');
        $("#main_image").attr('src', 'images/share_feature.png');
        slideshow.show(0);            
        slideshow.stop();        
    });

    $(".kds_button").mouseleave(function(){
        //$(".slide:visible").delay(800).fadeOut(1000, 'linear');
        $("#main_image").attr('src', 'images/full_feature.png');
        slideshow.show(0,{
            duration:0                
        });
        slideshow.play(false);            

        //$(".featured:first").fadeIn(1000, 'linear');
    });

    $(".next").click(function(){
        slideshow.show('next');            
    });

    $(".prev").click(function(){
        slideshow.show('previous');            
    });

I think my code is fairly straightforward. I have tried inserting code to test for a transition and then delay. I have as yet been unsuccessful. I'm a bit of a hack with js code. I'd appreciate a leg up.

[ryanflorence]

I realize this is five months ago, if you still need help please re-open and sorry for not following up on this before :(

[rkralston]

I don't have permission to reopen. I solved the issue a different way.