Databases
StackOverflow2013
Postsdbo
POJavascript timelapse-effect: displaying 30 images/second (read for more detail)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript timelapse-effect: displaying 30 images/second (read for more detail)
    text
    copied!<p>I have a client who has made a 'Visual Diary' of photographs that he took once a day for 365 days, for his portfolio site. He wants me to put these together into a time-lapse effect piece. I thought about using Flash but in the end opted for JavaScript.</p> <p>What needs to happen is this: The images cycle really really quickly with no transitions or anything, just image-image-image etc. About 30/fps or something like that. When you click the flashing images, it stops on the image you have selected, so the user can take a look. When you click again, the slideshow starts playing again.</p> <p>My problem is I'm a PHP/XHTML/CSS bloke who hasn't really the foggiest about JavaScript. I can happily integrate it into any page, but it's just coding the JavaScript that's troubling me.</p> <p>On his homepage, I have this code used to display a basic slideshow - with transition effects etc. It's in the HTML but you can fathom out the code I'm sure:</p> <pre><code>&lt;!-- Code for slideshow --&gt; &lt;!-- Found on http://www.webdeveloper.com/forum/showthread.php?t=81441 --&gt; &lt;SCRIPT LANGUAGE="JavaScript"&gt; &lt;!-- Begin // Set slideShowSpeed (milliseconds) var slideShowSpeed = 3000; // Duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = '1.jpg' Pic[1] = '2.jpg' Pic[2] = '3.jpg' Pic[3] = '4.jpg' Pic[4] = '5.jpg' Pic[5] = '6.jpg' Pic[6] = '7.jpg' Pic[7] = '8.jpg' Pic[8] = '9.jpg' Pic[9] = '10.jpg' Pic[10] = '11.jpg' Pic[11] = '12.jpg' Pic[12] = '13.jpg' Pic[13] = '14.jpg' Pic[14] = '15.jpg' Pic[15] = '16.jpg' Pic[16] = '17.jpg' Pic[17] = '18.jpg' Pic[18] = '19.jpg' Pic[19] = '20.jpg' // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i &lt; p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=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 (j &gt; (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); } // End --&gt; &lt;/script&gt; </code></pre> <p>Is there any way to modify this code to turn off all transitional effects, and make it stop playing when you click it/start it again? Otherwise, a reference to some different code would be helpful.</p> <p>Thank you everybody!</p> <p>Jack</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload