Image Slide Show - Book Flip Slide Show

I am refering to the following link: http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

Please someone tell me what I did wrong.

I guess it must be something with the placeholder gif which I did download to folder on my hard disk - but where do I have to put it then?

This is how I filled out the code:
---------------------------------------------------------------------------

<script type="text/javascript">

/***********************************************
* Book Flip slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
Create a div with transparent place holder in your html
<div id="Book" style="position:relative">
<img src="placeholder.gif" width="553" height="431">
</div>
width = 2*book image width +4 height = book image height+2

Insert onload in body tag
<body onload="ImageBook()">
*********************************************************/

// 7 variables to control behavior
var Book_Image_Width=549;
var Book_Image_Height=429;
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(

"http://www.host.com/user/imagefolder/image/photo1.jpg",
"http://www.host.com/user/imagefolder/image/photo1.jpg",
"http://www.host.com/user/imagefolder/image/photo1.jpg",
"http://www.host.com/user/imagefolder/image/photo1.jpg" // NOTE No comma after last line
);

Did you Create a div with transparent place holder in your html which looks like this?

Code:

<div id="Book" style="position:relative"> <img src="placeholder.gif" width="553" height="431"> </div>

And insert onload in body tag?

Code:

<body onload="ImageBook()">

Please post your whole HTML file wrapped in [code] and [/code].

cr3ative

Thank you for your quick answer!

Quote:

Did you Create a div with transparent place holder in your html which looks like this? ... And insert onload in body tag?

No, because I don't know how.

The code I posted is all I did.

Please give me an example for a complete HTML! (body)
I mean how should the whole HTML look like? Write me the missing lines - please!

HTML Code:

<html><head><script type="text/javascript"> /*********************************************** * Book Flip slideshow script- © Ger Versluis 2003 * Permission granted to DynamicDrive.com to feature script * This notice must stay intact for use * Visit [url]http://www.dynamicdrive.com/[/url] for full source code ***********************************************/ /******************************************************** Create a div with transparent place holder in your html <div id="Book" style="position:relative"> <img src="placeholder.gif" width="144" height="227"> </div> width = 2*book image width +4 height = book image height+2 Insert onload in body tag <body onload="ImageBook()"> *********************************************************/ // 7 variables to control behavior var Book_Image_Width=140; var Book_Image_Height=225; 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( "photo1.jpg","http://www.dynamicdrive.com", "photo2.jpg","http://www.javascriptkit.com", "photo3.jpg","", //this slide isn't linked "photo4.jpg","http://www.codingforums.com" // NOTE No comma after last line ); /***************** DO NOT EDIT BELOW **********************************/ var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1; var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length); function ImageBook(){ if(document.getElementById){ for(i=0;i<Book_Image_Sources.length;i+=2){ B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]} Book_Div=document.getElementById("Book"); B_LI=document.createElement("img");Book_Div.appendChild(B_LI); B_RI=document.createElement("img");Book_Div.appendChild(B_RI); B_MI=document.createElement("img");Book_Div.appendChild(B_MI); B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute"; B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1; B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px"; B_LI.style.left=0+"px"; B_MI.style.top=0+"px"; B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px"; B_RI.style.top=0+"px"; B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px"; B_LI.style.height=Book_Image_Height+"px"; B_MI.style.height=Book_Image_Height+"px"; B_RI.style.height=Book_Image_Height+"px"; B_LI.style.width=Book_Image_Width+"px"; B_MI.style.width=Book_Image_Width+"px"; B_RI.style.width=Book_Image_Width+"px"; if(Book_Border){ B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid"; B_LI.style.borderWidth=1+"px"; B_MI.style.borderWidth=1+"px"; B_RI.style.borderWidth=1+"px"; B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color} B_LI.src=B_Pre_Img[0].src; B_LI.lnk=Book_Image_Sources[1]; B_MI.src=B_Pre_Img[2].src; B_MI.lnk=Book_Image_Sources[3]; B_RI.src=B_Pre_Img[4].src; B_RI.lnk=Book_Image_Sources[5]; B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk; B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp; B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt; BookImages()}} function BookImages(){ if(!B_Stppd){ if(Book_Vertical_Turn){ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height)); MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz; B_MI.style.top=MidOffset+"px"; B_MI.style.height=B_MSz+"px"} else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width)); MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz; B_MI.style.left=MidOffset+"px"; B_MI.style.width=B_MSz+"px"} B_Angle+=Book_Speed/720*Math.PI; if(B_Angle>=Math.PI/2&&B_Direction){ B_Direction=0; if(B_CrImg==Book_Image_Sources.length)B_CrImg=0; B_MI.src=B_Pre_Img[B_CrImg].src; B_MI.lnk=Book_Image_Sources[B_CrImg+1]; B_CrImg+=2} if(B_Angle>=Math.PI){ B_Direction=1; B_TI=B_LI; B_LI=B_MI; B_MI=B_TI; if(Book_Vertical_Turn)B_MI.style.top=0+"px"; else B_MI.style.left=Book_Image_Width+1+"px"; B_MI.src=B_RI.src; B_MI.lnk=B_RI.lnk; setTimeout("Book_Next_Delay()",Book_NextPage_Delay)} else setTimeout("BookImages()",50)} else setTimeout("BookImages()",50)} function Book_Next_Delay(){ if(B_CrImg==Book_Image_Sources.length)B_CrImg=0; B_RI.src=B_Pre_Img[B_CrImg].src; B_RI.lnk=Book_Image_Sources[B_CrImg+1]; B_MI.style.zIndex=2; B_LI.style.zIndex=1; B_Angle=0; B_CrImg+=2; setTimeout("BookImages()",50)} function B_LdLnk(){if(this.lnk)window.location.href=this.lnk} function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"} function B_Rstrt(){B_Stppd=false} </script> <div id="Book" style="position:relative"> <img src="placeholder.gif" width="144" height="227"> </div> <p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p></head><body onload="ImageBook()"><div id="Book" style="position:relative"> <img src="placeholder.gif" width="144" height="227"> </div></body></html>

You will then need http://www.dynamicdrive.com/dynamici...laceholder.gif and photo1.jpg photo2.jpg photo3.jpg and photo4.jpg (your photos) in the folder.

cr3ative

Thanks for your answer => I will mark red, what I filled out - please controll it.

<html><head>script type="text/javascript">

/***********************************************
* Book Flip slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
Create a div with transparent place holder in your html
<div id="Book" style="position:relative">
<img src="placeholder.gif" width="144" height="227"
</div>
width = 2*book image width +4 height = book image height+2

Insert onload in body tag
<body onload="ImageBook()">
*********************************************************/

// 7 variables to control behavior
var Book_Image_Width=549;
var Book_Image_Height=429;
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(

"http://www.host.com/user/imagefolder/image/photo1.jpg",
"http://www.host.com/user/imagefolder/image/photo1.jpg",
"http://www.host.com/user/imagefolder/image/photo1.jpg",
"http://www.host.com/user/imagefolder/image/photo1.jpg"
// NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook(){
if(document.getElementById){
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}

function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;

setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
</script>

<div id="Book" style="position:relative">
<img src="placeholder.gif" width="144" height="227">
</div>

<p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p></head><body onload="ImageBook()"><div id="Book" style="position:relative"> <img src="http://www.dynamicdrive.com/dynamicindex14/placeholder.gif" width="553" height="431"> </div></body></html>

Could solve some problems by using MFP :D

NEW SITUATION:

It works very good with my Microsoft FrontPage - only Problem it shows only first 4 pix and I want 8 to show up - what's wrong?

I still have the problem, that only 4 pics show up and

can someone tell me the line where position is defined where the book appears? I want to put it more to the left!

Thank you!

Peppy.

Please thoroughly read the instructions on the script page. It is honestly all there.

cr3ative

Please tell me the lines - I could not find them. :o
I don't want to "demage" the whole code by chaning the wrong letters or numbers! :(

THANK YOU!