Solved

javascript function to stop show

Posted on 2012-03-22
4
227 Views
Last Modified: 2012-03-28
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
Comment
Question by:prostang
  • 2
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
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
 

Author Comment

by:prostang
Comment Utility
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
Comment Utility
Replace anywhere << Timeout >> by << Interval >>
0
 

Author Comment

by:prostang
Comment Utility
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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now