New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Book Flip Slideshow

Description: As the name loosely implies, Book Flip is an image slideshow that simulates a page being turned to reveal two new slides at once. Some other impressive features of this slideshow are:

  • Slideshow can be set to either flip horizontally or vertically.
  • Each image can have an optional link associated with it.
  • Slideshow pauses on mouseover.
  • A DOM based script that works in modern DHTML browsers- IE5+, NS6+, Opera 7+. 

Ah just gotta love DHTML!

Demo:


Directions Developer's View

Step 1: Insert the below script into the BODY section of your page where you wish the slideshow to appear:

Select All

Step 2: Download 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:

<body onload="ImageBook()"> 

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="Book" style="position:relative">
<img src="placeholder.gif" width="144" height="227">
</div>

You now need to change the width and height of the "placeholder.gif" image above using the preset formula:

placeholder width: 2*book image width+4

placeholder height: book image height+2

Note that if you set the slideshow to flip vertically, then the width and height settings need to be interchanged, so placeholder width= book image width+2, and placeholder height= 2*book imageheight+4.

And that's it. FYI the above customization steps are repeated within the script for easy reference.