View Full Version : Book Flip Slideshow not sorting correctly

09-22-2012, 11:09 PM
1) Script Title: Book Flip Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

3) Describe problem: When using the script the pictures doesn'r display in the order entered. How do I fix this?

// 7 variables to control behavior
var Book_Image_Width=500;
var Book_Image_Height=353;
var Book_Border=true;
var Book_Border_Color="gray";
var Book_Speed=15;
var Book_NextPage_Delay=1500; //1 second=1000
var Book_Vertical_Turn=0;

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

Book_Image_Sources=new Array(
"pictures/prog15.png","", //this slide isn't linked
"pictures/prog16.png","", // NOTE No comma after last line

09-22-2012, 11:27 PM
This is a known issue in this third party script. You could try to guess - or figure out what order to put your images in so that they would show in the order that you prefer. I believe it is consistent, at least with a certain number of images, so you should be able to do that, figure it out.

The author later made an update that doesn't have that problem and that has other features which are optional:


I don't believe he's supporting the script any longer though, and if I recall correctly, there's one or two things this advanced version doesn't do that the version on DD does. Good luck with it.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

09-23-2012, 11:44 AM

The updated script did the trick!

Dennis ;)

09-25-2012, 07:54 AM

I only checked the script with FF, but when I try IE7 or IE9 I only get the righthandside of the bookflip. Any suggestions?


09-25-2012, 09:37 AM
Looks OK to me, only too far to the right. To fix that, use a standards invoking DOCTYPE for the page:

<!DOCTYPE html>
<script type="text/javascript">/*(c) Ger Versluis 2003-2004*/

* Create a div with transparent place holder in your html *
* <div id="Book" style="position:relative"> *
* <img src="placeholder.gif" width="404" height="152"> *
* </div> *
* width = 2*book image width +4 height = book image height+2 *
* *
* Insert onload in body tag *
* <body onload="ImageBook()"> *
* *
* *
* 8 variables you can edit to control behavior *
// 7 variables to control behavior
var Book_Image_Width=500; // Image wi . . .

And here, make changes as shown:

<table width="1004" border="0" cellspacing="0" cellpadding="0">
<td valign="top" align="left">

<div id="Book" style="position:absolute">
<img src="pictures/placeholder-l.gif" width="1004" height="355">

But you should consider getting rid of the table and the placeholder image. You could then have:

<div id="Book" style="position: relative; width: 1004px; height: 355px; margin: 0 auto;">


09-25-2012, 07:40 PM

You're just great! Thanks a mllion!