Help Book Flip Slideshow

**jwb3d** · 07-04-2006, 11:40 PM

1) Script Title:
Book Flip Slideshow
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

3) Describe problem: How do if use the Book Flip Slideshow as a background.
In other words I would like to have text boxes and buttons as well as images on the page.

**jscheuer1** · 07-06-2006, 07:00 PM

Originally Posted by jwb3d

How do if use the Book Flip Slideshow as a background.
In other words I would like to have text boxes and buttons as well as images on the page.

Unless you are using an advanced version of this script, there are no text boxes or buttons associated with it. If there are other text boxes and buttons on the page, they can appear wherever you want them to, if laid out properly.

Please post a link to the page on your site that contains the problematic script so we can check it out.

We need to see your layout to correct it properly but, I suspect that the:

HTML Code:

<div id="Book" style="position:relative">

needs a height and width assigned to it equal to the height and width of the placeholder image, something like:

HTML Code:

<div id="Book" style="position:relative;width:227px;height:144px;">

**jwb3d** · 07-08-2006, 12:44 AM

When I press the "turn Page" button the page turns but the images cover the text boxes and buttons on the page.

Please look at this code.

<html>
<head>
<meta name="VI60_defaultClientScript" content="VBScript"><%
Response.Write"<center>"
Response.Write"<font color=red>"
Response.Write request.querySTring("Error")
Response.Write"</font>"
Response.Write"</center>"
%>
<meta name="VI60_defaultClientScript" content="VBScript">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">

// 7 variables to control behavior
var Book_Image_Width=390;
var Book_Image_Height=625;
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 "" file://C:\inetpub\wwwroot\WWWIDLAN\work\p0.jpg

Book_Image_Sources=new Array(
"notebooki.jpg","http://www.keepcon.com",
"notebookf.jpg","http://www.keepcon.com",
"notebookf.jpg","http://www.keepcon.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 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">

<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>

</SCRIPT>
</head>
<body><IMG STYLE=
"MARGIN-LEFT: 7px; WIDTH: 724px; TOP: 18px; HEIGHT: 2px"
HEIGHT="2"
HSPACE="0"
SRC=
"http://edtweb03dev168.edthosting.com/images/line-gradient-grey.gif"
WIDTH="724"
BORDER="0">

<TABLE STYLE=
"BORDER-RIGHT: #cccc33 thin solid; MARGIN-LEFT: 7px; BORDER-LEFT: #cccc33 thin solid; WIDTH: 725px; BORDER-BOTTOM: #cccc33 thin solid; HEIGHT: 32px"
CELLSPACING="0"
CELLPADDING="0"
WIDTH="725"
BGCOLOR="#89aacb"
BORDER="0"></TABLE></FORM>
<TABLE class=tblblue style="MARGIN-TOP: 1px; WIDTH: 733px; HEIGHT: 777px"
borderColor=#003366 height=777 cellSpacing=1 cellPadding=1 width=733
bgColor=white background="" border=8>

<TR>
<TD>   <TEXTAREA id=IMyFrn style="BORDER-TOP: #0000ff 1px solid; MARGIN-TOP: 35px; FONT-WEIGHT: bold; FONT-SIZE: 16px; LEFT: 35px; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #0000ff; MARGIN-LEFT: 40px; OVERFLOW: hidden; BORDER-LEFT: #0000ff 1px solid; WIDTH: 639px; FONT-FAMILY: Georgia; POSITION: absolute; TOP: 174px; HEIGHT: 86px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #0000ff" name=IMyFrn rows=1 cols=61></TEXTAREA>

<TABLE id=LblNote
style="MARGIN-TOP: 35px; LEFT: 42px; MARGIN-LEFT: 8px; WIDTH: 182px; POSITION: absolute; TOP: 74px; HEIGHT: 32px"
cellSpacing=0 cellPadding=0 width=182 border=0>

<TR>
<TD><STRONG><FONT face=Arial color=#0000ff size=2>Notes About Your
Friends:</FONT></STRONG></TD></TR></TABLE>

<TABLE
style="LEFT: 516px; WIDTH: 150px; POSITION: absolute; TOP: 635px; HEIGHT: 141px"
cellSpacing=0 cellPadding=0 width=150 border=0>

<TR>
<TD><INPUT class=butmain id=btnContact style="WIDTH: 150px; CURSOR: hand; HEIGHT: 20px; TEXT-DECORATION: underline" type=button size=133 value="Turn Page" name =btnContact></TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TD></TD></TR></TABLE>
<TABLE
style="FONT-SIZE: 12px; LEFT: 100px; WIDTH: 150px; POSITION: absolute; TOP: 335px; HEIGHT: 162px"
cellSpacing=0 cellPadding=0 width=150 border=0>

<TR>
<TD></TD>
<TD>  <IMG class="" id=ipreview1
style="LEFT: 265px; WIDTH: 135px; TOP: 10px; HEIGHT: 135px"
height=135 src="\images\NoLogo.gif" width=135 border=1
name=""></TD></TR>
<TR>
<TD></TD>
<TD><INPUT class=NewTxt id=file1
style="FONT-SIZE: 8px; WIDTH: 146px; HEIGHT: 18px" type=file
onchange=preview(this) size=4 name=file1></TD></TR>
<TR>
<TD></TD>
<TD id=tdchk1>Click Here Clear <INPUT language=vbscript
id=chkfile1
style="BORDER-RIGHT: #cccc33 2px solid; BORDER-TOP: #cccc33 2px solid; LEFT: 16px; BORDER-LEFT: #cccc33 2px solid; WIDTH: 15px; BORDER-BOTTOM: #cccc33 2px solid; TOP: 14px; HEIGHT: 17px"
onclick=chkdelImage() type=checkbox size=15
name=chkfile1></TD></TR></TABLE>
<TABLE
style="FONT-SIZE: 12px; LEFT: 482px; WIDTH: 150px; POSITION: absolute; TOP: 367px; HEIGHT: 162px"
cellSpacing=0 cellPadding=0 width=150 border=0>

<TR>
<TD></TD>
<TD>  <IMG class="" id=ipreview2
style="LEFT: 265px; WIDTH: 135px; TOP: 10px; HEIGHT: 135px"
height=135 src="\images\NoLogo.gif" width=135 border=1
name=""></TD></TR>
<TR>
<TD></TD>
<TD><INPUT class=NewTxt id=file2
style="FONT-SIZE: 8px; WIDTH: 146px; HEIGHT: 18px" type=file
onchange=preview(this) size=4 name=file2></TD></TR>
<TR>
<TD></TD>
<TD id=tdchk2>Click Here Clear <INPUT language=vbscript
id=chkfile2
style="BORDER-RIGHT: #cccc33 2px solid; BORDER-TOP: #cccc33 2px solid; LEFT: 16px; BORDER-LEFT: #cccc33 2px solid; WIDTH: 15px; BORDER-BOTTOM: #cccc33 2px solid; TOP: 14px; HEIGHT: 17px"
onclick=chkdelImage() type=checkbox size=15
name=chkfile2></TD></TR></TABLE></TD></TR></TABLE>
<DIV></DIV></body></HTML>

**jscheuer1** · 07-08-2006, 04:36 AM

1 ) I'm not into trying to copy code like that pasted into a message. If you want me to look at your code, the best thing is to give me a link to your page. If you have to paste it into a message, use the code tags provided for in this forum. To do this, use the advanced editor and hit the # button to insert code tags like so:

[code]code goes here[/code]

around your text so that it won't get wrapped and will appear like so:

Code:

code goes here

in the message.

2 ) Is that client side or server side VBscript you are using there?

3 ) The script here on DD has no 'turn page' button. Where did you find a version that does, or did you make one yourself?

**jwb3d** · 07-08-2006, 10:31 PM

Using client side VBscript and I created the button myself

**jscheuer1** · 07-09-2006, 04:05 AM

OK then, perhaps we don't really need the code in a readable format for now.

First of all client side VBscript isn't very good for this because only certain versions of IE will use it. Your page should be accessible to a wider variety of browsers so, when scripting client side, use javascript.

Secondly, rather than try to reinvent the wheel, the author of this script has already developed it to use controls. These should be able to be adapted to suit your purposes without too much trouble. See:

http://www.burmees.nl/menu/bookextended.html

**jwb3d** · 07-10-2006, 12:18 PM

Is there any way to substitute the a picture file with a htm page in the “Book_Image_Sources” area?

Thread: Help Book Flip Slideshow

Thread Tools

Search Thread

Help Book Flip Slideshow

Flip slideshow

Book Flip Slideshow

Bookmarks

Bookmarks

Posting Permissions