PDA

View Full Version : My Book Flip Slideshow doesn't work



laurag
09-28-2009, 04:20 AM
1) Script Title: Book Flip Slideshow

2) Script URL (on DD): I didn't publish it yet, but I send you the code below

3) Describe problem: I don't know, I think I did everything right, but the book doesn't appears.

This is the code of the complete page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>prueba</title>
</head>

<body onload="ImageBook()"> <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=315;
var Book_Image_Height=315;
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(
"<img src="catalogo Lescano_Página_01.jpg" />","",
"<img src="catalogo Lescano_Página_02.jpg" />","",
"<img src="catalogo Lescano_Página_03.jpg" />","", //this slide isn't linked
"<img src="catalogo Lescano_Página_04.jpg" />","",
"<img src="catalogo Lescano_Página_05.jpg" />","",
"<img src="catalogo Lescano_Página_06.jpg" />","",
"<img src="catalogo Lescano_Página_07.jpg" />","",
"<img src="catalogo Lescano_Página_08.jpg" />","",
"<img src="catalogo Lescano_Página_09.jpg" />","",
"<img src="catalogo Lescano_Página_10.jpg" />","",
"<img src="catalogo Lescano_Página_11.jpg" />","",
"<img src="catalogo Lescano_Página_12.jpg" />","",
"<img src="catalogo Lescano_Página_13.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="634" height="317">
</div>
</div>

<p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
</body>
</html>

Thanks for your help

bluewalrus
09-28-2009, 04:33 AM
I think this is the the link to the page where you got the code from http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

Do you have a link to the page it is erroring on?

laurag
09-28-2009, 12:07 PM
Yes, that´s the link where I got the code from. I didn't put it online yet, but when I test the dreamweaver page on the browser, it doesn't work.

Thank you for your help

jscheuer1
09-28-2009, 03:21 PM
Your images array is incorrect. Only the path (if different than the page) and filename should be specified. Spaces should be avoided in paths and filenames. The filenames you currently have (if they are correct) indicate that your array should look like so:


Book_Image_Sources=new Array(
"catalogo%20Lescano_Página_01.jpg","",
"catalogo%20Lescano_Página_02.jpg","",
"catalogo%20Lescano_Página_03.jpg","", //this slide isn't linked
"catalogo%20Lescano_Página_04.jpg","",
"catalogo%20Lescano_Página_05.jpg","",
"catalogo%20Lescano_Página_06.jpg","",
"catalogo%20Lescano_Página_07.jpg","",
"catalogo%20Lescano_Página_08.jpg","",
"catalogo%20Lescano_Página_09.jpg","",
"catalogo%20Lescano_Página_10.jpg","",
"catalogo%20Lescano_Página_11.jpg","",
"catalogo%20Lescano_Página_12.jpg","",
"catalogo%20Lescano_Página_13.jpg","" // NOTE No comma after last line
);

If you want more help, please put the page up live somewhere and post a link to it so we can check it out.

laurag
09-28-2009, 03:59 PM
I've changed the filenames, but it still doesn't work.
I've put it online, you can find it at tallerfwiya.com.ar (http://tallerfwiya.com.ar)

Again, thank you for your help

jscheuer1
09-28-2009, 04:51 PM
Well, in your demo, you ignored part of my advice. You should only list the filename, not the image tag. So it should look like so:


Book_Image_Sources=new Array(
"Lescano_Página_01.jpg","",
"Lescano_Página_02.jpg","",
"Lescano_Página_03.jpg","", //this slide isn't linked
"Lescano_Página_04.jpg","",
"Lescano_Página_05.jpg","",
"Lescano_Página_06.jpg","",
"Lescano_Página_07.jpg","",
"Lescano_Página_08.jpg","",
"Lescano_Página_09.jpg","",
"Lescano_Página_10.jpg","",
"Lescano_Página_11.jpg","",
"Lescano_Página_12.jpg","",
"Lescano_Página_13.jpg",""
);

But your use of the 'high ASCII' character á also seems to be a problem. Rename the files and change how they are listed to:


Book_Image_Sources=new Array(
"Lescano_Pagina_01.jpg","",
"Lescano_Pagina_02.jpg","",
"Lescano_Pagina_03.jpg","", //this slide isn't linked
"Lescano_Pagina_04.jpg","",
"Lescano_Pagina_05.jpg","",
"Lescano_Pagina_06.jpg","",
"Lescano_Pagina_07.jpg","",
"Lescano_Pagina_08.jpg","",
"Lescano_Pagina_09.jpg","",
"Lescano_Pagina_10.jpg","",
"Lescano_Pagina_11.jpg","",
"Lescano_Pagina_12.jpg","",
"Lescano_Pagina_13.jpg",""
);

laurag
09-28-2009, 05:10 PM
:):D:):D

Now it works!!!! Thank you very much