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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
leakim971PluritechnicianCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.