javascript function to stop show

I modified some code I found to display a slide show and have it working exactly as I want.  I have run into a problem where I cannot stop the show and clear the canvas.  Here is the code to run the slideshow:


// JavaScript Document
  
var imagePaths = [
  "_sites/BBB_homepage.png",
  "_sites/CabezonKidsDental_homepage.png",
  "_sites/djer_homepage.png",
  "_sites/enchanted_homepage.png",
  "_sites/JoeSSausage_homepage.png",
  "_sites/MMCS_homepage.png",
  "_sites/mySRB.png",
  "_sites/PHCP_homepage.png",
  "_sites/smilesforkidsnm_homepage.png",
  "_sites/t2consulting_homepage.png",
  "_sites/Upward_homepage.png",
  "_sites/Webb_based_homepage.png"
];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;
var stopShow = 0;
  
function slideShow() {
  if (!stopShow){
    showCanvas = document.getElementById('Canvas1');
    showCanvasCtx = showCanvas.getContext('2d');

    //clear canvas
    showCanvasCtx.clearRect(0,0,showCanvasCtx.canvas.width,showCanvasCtx.canvas.height);
  
    img.setAttribute('width','500');
    img.setAttribute('height','400');
    switchImage();
    
    //start the animation
    setInterval(switchImage,3000);
  }
}

function switchImage() {
  img.setAttribute('src',imagePaths[currentImage++]);
  if (currentImage >= imagePaths.length)
      currentImage = 0;
    
  showCanvasCtx.globalAlpha = 0.1;
  revealTimer = setInterval(revealImage,100);
}
  
function revealImage() {
  showCanvasCtx.save();
  showCanvasCtx.drawImage(img,100,0,500,400);
  showCanvasCtx.globalAlpha += 0.1;
  if (showCanvasCtx.globalAlpha >= 1.0) clearInterval(revealTimer);
  showCanvasCtx.restore();
}

Open in new window


Here is the function that I wrote thinking that it would stop the slideshow:

function stopSlideShow() {
  //alert('stop show');
  clearInterval(revealTimer);
  stopShow=1;
}

Open in new window

prostangAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
replace line 23  by :
		var slideTimer; 

Open in new window

line 37, replace :
setInterval(switchImage,3000);

Open in new window

by :
slideTimer = setInterval(switchImage,3000);

Open in new window

line 47, replace :
revealTimer = setInterval(revealImage,100);

Open in new window

by :
revealTimer = setTimeout(revealImage,100); 

Open in new window


and use :
function stopSlideShow() {
			//alert('stop show');
			clearInterval(slideTimer);
			clearTimeout(revealTimer);
			stopShow=1;
		}

Open in new window

0
 
prostangAuthor Commented:
When I launch the slideShow function, there is no fading.  All images are now stacked and the alpha is set for the entire canvas to .1.  It does stop the show and allows me to clear.
0
 
leakim971Connect With a Mentor PluritechnicianCommented:
Replace anywhere << Timeout >> by << Interval >>
0
 
prostangAuthor Commented:
it stops the function, but does not allow to clear the canvas and the information under the image still has an alpha of .1.

http://mjmco.com/MJMCo.html

the web design link will show -view examples when clicked.  
the -view examples runs the slide show, the stop (just for testing now) should (and does stop it).  
When I click any other link, the first command is to clear the canvas, which isn't working now.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.