Javascript timelapse-effect: displaying 30 images/second (read for more detail) -

I have a customer who has made pictures 'visual diary' which took it once a day for 365 days For that, the portfolio site wants me to put them in a time-consuming effect. I thought about using Flash, but finally chose JavaScript.

What is the need to do this: the cycle of images is really a variation or nothing, only image-image-image etc. About 30 / FPS or something like when you click flashing images, it stops the image you choose, so the user can keep an eye. When you click again, the slideshow starts playing again.

My problem is that I am a PHP / XHTML / CSS block which is not really about Javascript. I can happily integrate it into any page, but this is just javascript coding that is bothering me.

On my homepage, I am used to display an original slide show of this code - transition effects etc. This HTML but you can understand the code I'm sure of:

  & lt ;! - Code of slideshow - & gt; & Lt ;! - http://www.webdeveloper.com/forum/showthread.php?t=81441 - & gt; Found on & lt; SCRIPT LANGUAGE = "JavaScript" & gt; & Lt ;! - Start // Set slideshow speed (milliseconds) var slideshowspad = 3000; // Crossfade duration (seconds) var crossfade = 3; // Specify image files var pic = new array (); // To add more images, just below // pattern, sir [05] = '1.jpg' Pic [1] = '2.jpg' Pic [2] = '3.jpg' by adding the photo below Continue [3] = '4.jpg' Pic [4] = '5.jpg' Pic [5] = '6.jpg' Pic [6] = '7.jpg' Pic [7] = '8 JPG' Picture [8] = '9 Jpg 'photo [9] = '10 .jpg' pick [10] = '11 .jpg 'Pic [11] = '12 .jpg' pick [12] = '13 Jpg 'photo [13] = '14 Jpg 'pick [14] = '15 Jpg 'pickup [15] = '16 Jpg 'pickup [16] =' 17 Jpg 'pickup [17] =' 18 Jpg 'photo [18] = '19 .jpg' Pic [1 9] = '20 .jpg '// do not edit anything under this line; Var j = 0; Var p = Pic.length; Var preLoad = new array (); (I = 0; i & lt; p; i ++) for {preload [i] = new image (); Preload [ii] .src = Pic [i]; } Function runleashosho () {if (document.all) {document.images.SlideShow.style.filter = "blendTrans (period = 2)"; Document.images.SlideShow.style.filter = "blendTrans (period = crossFadeDuration)"; Document.images.SlideShow.filters.blendTrans.Apply (); } Document.images.SlideShow.src = preLoad [j] .src; If (document.all) {document.images.SlideShow.filters.blendTrans.Play (); } J = J + 1; If (H & gt; (P - 1)) j = 0; T = settimeout ('runl slideshow', slideshow speed); } // and - & gt; & Lt; / Script & gt;  

Is there any way to modify this code to stop all transitional effects, and when you click it / start it again, then does it have to stop ? Otherwise, a reference to some different codes would be helpful.

Thanks everyone!

Jack

You are using IE-specific code. I like this (my personal favorite) using various effects modules in a dedicated JavaScript library, or +

To stop the slideshow, you should just be able to clarify the timeout T :

  the timeout (t);  

In addition, you should not quote the first parameter of setTimeout . Pass this function reference:

  setTimeout (Runtlide shows, slideshow speed);