Pause/Play Issue

[Mattio2187]

Hi, I'm having an issue with a javascript/jquery news rotator that I have created. For the most part, everything works. The captions rotate through automatically over time, you can click one of the numbered buttons to jump to a caption, and the play/pause button works great independently.

 

The problem is that after having paused the rotation, if you click on a caption button (instead of unpausing first) and then try to pause again, the rotation doesn't stop but instead jumps to the next frame.

 

I can't figure this out for the life of me. I figure that I must be doing something in the process of unpausing that doesn't occur when a  caption button ( by caption button I mean the numbered buttons along top left) is clicked.

 

This gallery is running live at    http://mattsolano.com/FeatureFade_Main/featurefade.html

And here is the Javascript code on its own (ignore the obvious comments, I am trying to perfect this code so that it is good for reusing by others), thanks in advance for your help: 

 

 

$(document).ready(function(){

 

$("#button1").click(function () {

clearTimeout(handle);

      changestate(1);

$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like

 

});

 

 

$("#button2").click(function () {

clearTimeout(handle);

      changestate(2);

$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like

  });

 

 

$("#button3").click(function () {

clearTimeout(handle);

      changestate(3);

$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like

  });

 

 

$("#button4").click(function () {

clearTimeout(handle);

      changestate(4);

$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like

  });

 

 

$("#button5").click(function () {

      clearTimeout(handle);

changestate(5);

$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like

 

  });

 

 

$("#button6").click(function () {

clearTimeout(handle);

changestate(6);

$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like

 

});

 

/*$("#stopbutton").click(function () {

clearTimeout(handle);

});*/

 

$("#stopbutton").toggle(

  function () {

frame=laststate+1;

  clearTimeout(handle);

$("#stopbutton").css("background-image", "url(images/play.png)");  // Adjust this url to proper location if changing what the Play button looks like

},

  function () {

frame=laststate+1;

 

if(frame==7){   // Adjust this value to the total number of captions + 1

clearTimeout(handle);

  changestate(1);

$("#stopbutton").css("background-image", "url(images/pause.png)");

 

}else{

clearTimeout(handle);

  changestate(frame);

$("#stopbutton").css("background-image", "url(images/pause.png)");  // Adjust this url to proper location if changing what the Pause button looks like

}

}

);

 

 

 

 

$("#feature2").fadeTo(1000 , 0);    // -----------

$("#featureinfo2").fadeTo(1000 , 0); // These lines initialize the images

$("#feature3").fadeTo(1000 , 0); // and information of captions 2 through 6

$("#featureinfo3").fadeTo(1000 , 0); // to an opacity of 0.

$("#feature4").fadeTo(1000 , 0); //

$("#featureinfo4").fadeTo(1000 , 0); // This is needed for Internet Explorer

$("#feature5").fadeTo(1000 , 0); //

$("#featureinfo5").fadeTo(1000 , 0); //

$("#feature6").fadeTo(1000 , 0); //

$("#featureinfo6").fadeTo(1000 , 0); //------------

 

 

 

});/*----End of (document).ready----*/

 

 

var handle;

var laststate;

var frame;

 

 

 

 

 

 

 

 

function changestate (frame){

 

 

   

 

if (laststate>0){

 

$("#feature" + laststate).fadeTo(800 , 0); // This fades the outgoing image out for a duration of 1 second (1000 milliseconds) to an opacity of 0

$("#featureinfo" + laststate).fadeTo(800 , 0); // This fades the outgoing info out for a duration of 1 second (1000 milliseconds) to an opacity of 0

$("#button"+laststate).css("background-color", "#FFFFFF"); // Sets the color of the outgoing button back to white

$("#feature"+laststate).animate({top: "427px"},0); // Moves the outgoing image below the entire news box in 0 milliseconds

$("#featureinfo"+laststate).animate({top: "427px"},0); // Moves the outgoing info below the entire news box in 0 milliseconds

 

}

 

 

 

 

 

$("#feature"+frame).animate({top: "0px"},0); // Moves the incoming image into place in 0 milliseconds

$("#featureinfo"+frame).animate({top: "252px"},0); // Moves the incoming info into place in 0 milliseconds, should be the same top location as you have set in css (if changed)

$("#feature" + frame).fadeTo(800 , 1); // Fades in incoming image to 100% (1) opacity in 1 second (1000 milliseconds)

$("#featureinfo" + frame).fadeTo(800 , 1); // Fades in incoming info to 100% (1) opacity in 1 second (1000 milliseconds)

$("#button"+frame).css("background-color", "#70acca"); // Changes Incoming Button color to show current caption

 

 

 

 

 

 

 

 

 

 

 

 

laststate = frame;

 

 

if(frame==6){ // Adjust the == value to the total amount of captions being used (if changing)

 

laststate=frame;

frame=0;

}

 

handle = setTimeout(function(){

 

changestate(frame+1);

},4600); // Adjust this value to change the time in which caption is visible ( time is in milliseconds)

 

 

 

}

 

 

$(document).ready(function(){

 

changestate(1);

 

 

});

[Mattio2187]

I forgot to add that this occurs every other time