Over the last few weeks I have been looking for a simple javascript based slideshow script based upon the prototype.js library. I found a few scripts that looked rather shiny but they were difficult to integrate with a php backend (I wanted something that could use simple xhtml).
The code to create a slide show is rather simple. Simple create an element and everything that you place inside of that element will be presented in the slide show.
the XHTML:
(it is very important that the style of the parent element is set to “display:none” inline and not in the stylesheet or elsewhere in the document. The prototype library is unable to change the opacity/display of an element whose style is define in an external stylesheet).
1 2 3 4 5 | <div id="slides" style="display:none" > <img src="http://www.sxc.hu/pic/m/l/lu/lusi/1189704_ripe_strawberries_3.jpg" /> <img src="http://www.sxc.hu/pic/m/s/sj/sjur/1186634_kiwi.jpg" /> <img src="http://www.sxc.hu/pic/m/l/lu/lusi/1186300_banana_diet_4.jpg" /> </div> |
The Javascript:
To create a slideshow simple include prototype (either on your site or using google’s service) and call the StartSlideShow function. The first argument of the function is the id of parent element in this case slides. The second argument is the length of time (in milliseconds) that a particular slide stays visible.
1 2 3 4 5 | <script type="text/javascript"> window.onload=function(){ StartSlideShow('slides', 2000); } </script> |
If you don’t already have Prototype.js included as a javascript library on the site you are working on it can quickly and easily be added via google’s javascript api service:
1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("prototype", "1.6"); google.load("scriptaculous", "1.8.2"); </script> <script type="text/javascript" src="slideshow.js"></script> <script type="text/javascript"> window.onload=function(){ StartSlideShow('slides', 2000); } </script> |
The entire slideshow.js file is less than 30 lines of code (not counting the comments). The script should be easy to understand and modify.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | function DoSlide(slide, index, slideLength){ setTimeout(function(index){ $(slide).appear(); }, index * slideLength, index); setTimeout(function(index){ $(slide).fade(); }, (index * slideLength) + (slideLength / 2), index); } function DoSlideShow(slideshowDiv, slideLength){ var slides = $(slideshowDiv).childElements(); //fades each slide in and out slides.each(function(s, index){ DoSlide(s, index, slideLength); }); var intervalLength = slideLength * slides.size(); var slideShow = setInterval( function(slideshowDiv, slideLength){ DoSlideShow(slideshowDiv, slideLength) }, intervalLength, slideshowDiv, slideLength); } function StartSlideShow(slideshowDiv, slideLength) { var slides = $(slideshowDiv).childElements(); //hides all slides inside div slides.each(function(s, index){ s.toggle(); }); //makes parent slide div visible $(slideshowDiv).toggle(); DoSlideShow(slideshowDiv, slideLength); } |
If you are interested in a working copy of the slideshow I have a demo set up: http://scratch.casanovawebdesign.com/slideshow. If anyone has any questions or suggestions for this script feel free to discuss in the comment section.
Regards,
Adam Haney
Chief Developer Casa Nova Designs
