[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • Last Modified:

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

0
prostang
Asked:
prostang
  • 2
  • 2
2 Solutions
 
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
 
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now