Results 1 to 1 of 1

Thread: flipbook

  1. #1
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default flipbook

    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:

    Code:
    <!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
    Last edited by djr33; 06-15-2011 at 08:12 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •