Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Description: Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion. Highlights of this script other than its stunning appearance are:
Are you impressed yet?
Step 1: Insert the below script into the BODY section of your page where you wish the slideshow to appear:
Step 2: Download the the below image "placeholder.gif", which the above script requires and references:
(enlarged for easier download. Right click and choose "Save As").
Step 3: Finally, add the below onload event handler inside the <BODY> tag itself:
That's a wrap. Read on for important customization info.
Customizing the script
All changes to the script takes place in the code of Step 1, which is documented for the purpose. First, customize the 7 variables near the top of the script per the comments. Then, locate the <DIV> tag at the bottom of the code, which reads:
<div id="Carousel" style="position:relative"> <img src="placeholder.gif" width="371" height="227"> </div>
This is where things get interesting. You now need to change the width and height of the "placeholder.gif" image above using the preset formula:
In other words, depending on the number of sides your Carousel slideshow is set to, the width and height of the placeholder.gif image needs to change accordingly. In the demo, the slideshow is 8-sided, with images each having a dimension of "140" and "225". So the placeholder.gif is set to "371" (2.62*140+5) and "227" (225+2).
And that's it. FYI the above customization steps are repeated within the script for easy reference.