PDA

View Full Version : flipbook



hartool
06-15-2011, 03:26 PM
Flipbook
http://www.burmees.nl/menu/bookextended.html

On my site http://www.hartool.nl/DNH.htm I use your fantastic flipbook script as follows:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title> Desert Nomad House </title>
<meta http-equiv="imagetoolbar" content="no">
</head>

<body bgcolor="#4D103A" text="#FFFFFF" 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
***********************************************/
var Book_Image_Width=480;
var Book_Image_Height=322;
var Book_Border=true;
var Book_Border_Color="#B8B39F";
var Book_Speed=12;
var Book_NextPage_Delay=3000; //1 second=1000
var Book_Vertical_Turn=0;
var Book_BackWard=false;
var Book_Auto=true;

Book_Image_Sources=new Array(
"all06.jpg", "http://www.hartool.nl/all06b.jpg","new",
"all00.jpg", "http://www.hartool.nl/all00b.jpg","new",
"all02.jpg", "http://www.hartool.nl/all02b.jpg","new",
"all05.jpg", "http://www.hartool.nl/all05b.jpg","new",
"all03.jpg", "http://www.hartool.nl/all03b.jpg","new",
"all04.jpg", "http://www.hartool.nl/all04b.jpg","new",
"view03.jpg", "http://www.hartool.nl/view03b.jpg","new",
"view07.jpg", "http://www.hartool.nl/view07b.jpg","new",
"living02.jpg", "http://www.hartool.nl/living02b.jpg","new",
"living03.jpg", "http://www.hartool.nl/living03b.jpg","new",
"living05.jpg", "http://www.hartool.nl/living05b.jpg","new",
"living06.jpg", "http://www.hartool.nl/living06b.jpg","new",
"living09.jpg", "http://www.hartool.nl/living09b.jpg","new",
"living10.jpg", "http://www.hartool.nl/living10b.jpg","new",
"living11.jpg", "http://www.hartool.nl/living11b.jpg","new",
"living20.jpg", "http://www.hartool.nl/living20b.jpg","new",
"night01.jpg", "http://www.hartool.nl/night01b.jpg","new",
"patio01.jpg", "http://www.hartool.nl/patio01b","new" // NOTE No comma after last line
);

var B_LI,B_MI,B_RI,B_TI;
var B_Angle=0,B_CrMImg,B_CrSImg,B_MaxW,B_Drctn=true,B_DirChngd=false;
var B_Srcs=Book_Image_Sources,B_SrcL=B_Srcs.length,B_ChngDirFlg=false;
var B_MSz,B_Stppd=Book_Auto?false:true;B_Pre_Img=new Array(B_SrcL);

function ImageBook(){
if(document.getElementById){
for(var i=0;i<B_SrcL;i+=3){B_Pre_Img[i]=new Image();B_Pre_Img[i].src=B_Srcs[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=B_LI.style.left=B_MI.style.top=B_RI.style.top=0+"px";
B_MI.style.left=(Book_BackWard?0:Book_Image_Width+1)+"px";
B_RI.style.left=Book_Image_Width+1+"px";
B_LI.style.height=B_MI.style.height=B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=B_MI.style.width=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=B_MI.style.borderWidth=B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=Book_BackWard?B_Srcs[B_SrcL-12]:B_Srcs[0];
B_LI.lnk=Book_BackWard?B_Srcs[B_SrcL-11]:B_Srcs[1];
B_LI.trgt=Book_BackWard?B_Srcs[B_SrcL-10]:B_Srcs[2];
B_MI.src=Book_BackWard?B_Srcs[B_SrcL-6]:B_Srcs[3];
B_MI.lnk=Book_BackWard?B_Srcs[B_SrcL-5]:B_Srcs[4];
B_MI.trgt=Book_BackWard?B_Srcs[B_SrcL-4]:B_Srcs[5];
B_RI.src=Book_BackWard?B_Srcs[B_SrcL-3]:B_Srcs[9];
B_RI.lnk=Book_BackWard?B_Srcs[B_SrcL-2]:B_Srcs[10];
B_RI.trgt=Book_BackWard?B_Srcs[B_SrcL-1]:B_Srcs[11];
B_CrMImg=Book_BackWard?B_SrcL-9:6;
B_CrSImg=Book_BackWard?B_SrcL-18:15;
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(B_ChngDirFlg)B_ChngDrctn();
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=!Book_BackWard?B_Drctn?Book_Image_Width+1:Book_Image_Width-B_MSz:
B_Drctn?Book_Image_Width-B_MSz:Book_Image_Width+1;
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_Drctn){
B_Drctn=false;
B_MI.src=B_Srcs[B_CrMImg];B_MI.lnk=B_Srcs[B_CrMImg+1];B_MI.trgt=B_Srcs[B_CrMImg+2];
B_CrMImg+=(Book_BackWard?-6:6);
if(B_CrMImg>=B_SrcL)B_CrMImg-=B_SrcL;
if(B_CrMImg<0)B_CrMImg+=B_SrcL}
if(B_Angle>=Math.PI){
B_Drctn=true;
if(!Book_BackWard){
B_TI=B_LI;B_LI=B_MI;B_MI=B_TI;
B_MI.style.left=Book_Image_Width+1+"px";
B_MI.src=B_RI.src; B_MI.lnk=B_RI.lnk;B_MI.trgt=B_RI.trgt}
else{ B_TI=B_RI;B_RI=B_MI;B_MI=B_TI;
B_MI.style.left=0+"px";
B_MI.src=B_LI.src;B_MI.lnk=B_LI.lnk;B_MI.trgt=B_LI.trgt}
setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}


function Book_Next_Delay(){
if(!Book_BackWard){
B_RI.src=B_Srcs[B_CrSImg]; B_RI.lnk=B_Srcs[B_CrSImg+1];B_RI.trgt=B_Srcs[B_CrSImg+2];
B_LI.style.zIndex=1}
else{ B_LI.src=B_Srcs[B_CrSImg]; B_LI.lnk=B_Srcs[B_CrSImg+1];B_LI.trgt=B_Srcs[B_CrSImg+2];
B_RI.style.zIndex=1}
B_MI.style.zIndex=2;B_Angle=0;
B_CrSImg+=(Book_BackWard?-6:6);
if(B_CrSImg>=B_SrcL&&!Book_BackWard)B_CrSImg-=B_SrcL;
if(B_CrSImg<0&&Book_BackWard)B_CrSImg+=B_SrcL;
if(!Book_Auto&&!B_DirChngd)B_Stppd=true;B_DirChngd=false;
setTimeout("BookImages()",50)}

function B_ChngDrctn(){
B_Stppd=true;
Book_BackWard=Book_BackWard?false:true;B_Drctn=B_Drctn?false:true;
B_Angle=Math.PI-B_Angle;
B_ChngDirFlg=B_Stppd=false;
B_CrMImg+=(Book_BackWard?-9:9);
if(B_CrMImg>=B_SrcL)B_CrMImg-=B_SrcL;
if(B_CrMImg<0)B_CrMImg+=B_SrcL;
B_CrSImg+=(Book_BackWard?-21:21);
if(B_CrSImg>=B_SrcL)B_CrSImg-=B_SrcL;
if(B_CrSImg<0)B_CrSImg+=B_SrcL;
B_DirChngd=true}

function Book_ChangeDirection(){B_Stppd=false;B_ChngDirFlg=true}
function Book_GoBackWard(){B_Stppd=false;if(!Book_BackWard)Book_ChangeDirection()}
function Book_GoForWard(){B_Stppd=false;if(Book_BackWard)Book_ChangeDirection()}
function Book_ChangeAuto(){B_Stppd=false;Book_Auto=Book_Auto?false:true}
function Book_Automated(){B_Stppd=false;Book_Auto=true}
function Book_Manual(){Book_Auto=false}
function B_Stp(){if(Book_Auto)B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){if(Book_Auto)B_Stppd=false}
function B_LdLnk(){
var B_Frame;
if(this.lnk){
if(!this.trgt)location.href=this.lnk;
else if(this.trgt=="top")top.location.href=this.lnk;
else if(this.trgt=="new")window.open(this.lnk);
else if(B_Frame=parent.frames[this.trgt])B_Frame.location.href=this.lnk;
else location.href=this.lnk}}


</script>

<div align="center">
<center>
<table width="100%" border="0">
<tr>
<td align="center" height="10%" width="100%">
<font size="+4" >
<br>
</font>
<b><font face="Verdana" size="6">
DESERT NOMAD HOUSE<br>
</font></b>
<br>
</td>
</tr>
</table>
</center>
</div>

<div align="center">
<center>

<table width="978" height="336" border="4" bordercolorlight="#FF00FF" bordercolordark="#FF00FF">
<tr>
<td align="center">
<div id="Book" style="position: relative; width: 100%; height: 100%">
<img src="placeholder.gif" align="center">
</div>
</td>
</tr>
</table>

</center>
</div>

<br>
<center>
<br><br><br>
</center>

<p>&nbsp;</p>
<p>
<center>
</center>

</p>

<p>
&nbsp;

</p>

<div align="center">
<center>
<table border="0" width="100%">
<tr>
<td width="25%" align="center"><input type="button" value=">>" onclick="Book_GoBackWard()">
</td>
<td width="25%" align="center"><input type="button" value="Pause" onclick="Book_ChangeAuto()">
</td>
<td width="25%" align="center"><input type="button" value="Start" onclick="Book_Automated()"></td>
<td width="25%" align="center"><input type="button" value="<<" onclick="Book_GoForWard()"></td>
</tr>
</table>
</center>
</div>

<p>
<center>
<font face="Verdana" size="4" color="#FFFFFF"><b>Mouse over picture = pause
<br>
Click on picture = double size
</b></font>
<br><br>
</center>


</body>

</html>



This works fine, as long as I use PAUSE before clicking the picture for double size popup. If I go directly to the picture and click for double size, the flipbook continues flipping and after closing the popup, I don"t end up at the same page from where I started.
Is there any way to correct this ? Possibly by combining the CLICK PICTURE and the PAUSE statements.

Hope to hear from you.
Thanks in advance.
Frank