Book Flip Slideshow

**mikep** · 12-06-2005, 05:07 PM

Hi all

Just wondering if there is a way of using two buttons (graphics) to control the start/stop of the bookflip image display. I have it currently with the ability to pause the animation when the mouse hovers over it complete with message, but I really would like to control the same with start/stop buttons. Can this be done??
Thanks for any advice, Mike

**jscheuer1** · 12-06-2005, 11:20 PM

The author has already added many refinements:

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

**mikep** · 12-07-2005, 08:44 PM

Brilliant - appears to be just what I am looking for - will have a go at that...

Thanks very much.

**mikep** · 12-09-2005, 09:31 PM

Hello

I've run into a small problem with the code for this one, I'm nearly there, but only some of the images appear to display correctly.
I've included the code for the page in question, perhaps someone could shed some light on the problem area and how to solve it??
Many thanks.

------------------------------------------------------------
</head>

<body onload="ImageBook();dd_StatusBarMsg('Lockstone Design | Graphic Design | Logos | Artwork | Website Design');return document.MM_returnValue" onmouseout="dd_StatusBarMsg('Lockstone Design | Graphic Design | Logos | Artwork | Website Design')">
<table width="487" height="358" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="237" valign="top" width="487">
<div align="center">
<script type="text/javascript">

/***********************************************
* Book Flip slideshow script- C 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=140;
var Book_Image_Height=225;
var Book_Border=true;
var Book_Border_Color="gray";
var Book_Speed=15;
var Book_NextPage_Delay=10;
var Book_BackWard=false;
var Book_Auto=false;

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

Book_Image_Sources=new Array(
"images/back.jpg","",
"images/front.jpg","",
"images/p3.jpg","",
"images/p2.jpg","",
"images/p5.jpg","",
"images/p4.jpg","",
"images/p7.jpg","",
"images/p6.jpg","",
"images/p9.jpg","",
"images/p8.jpg","",
"images/p11.jpg","",
"images/p10.jpg","",
"images/p13.jpg","",
"images/p12.jpg","",
"images/p15.jpg","",
"images/p14.jpg","",
"images/p17.jpg","",
"images/p16.jpg","",
"images/p19.jpg","",
"images/p18.jpg","",
"images/p21.jpg","",
"images/p20.jpg","",
"images/p23.jpg","",
"images/p22.jpg","",
"images/p25.jpg","",
"images/p24.jpg","",
"images/p27.jpg","",
"images/p26.jpg","",
"images/p29.jpg","",
"images/p28.jpg","",
"images/p31.jpg","",
"images/p30.jpg","",
"images/p33.jpg","",
"images/p32.jpg","",
"images/p35.jpg","",
"images/p34.jpg",""
);

/***************** DO NOT EDIT BELOW **********************************/
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 id="Book" style="position:absolute; left: 117px; top: 15px;"></div>
<img src="placeholder.gif" width="144" height="227"> </div>

</td>
</tr>
<tr>
<td class="main" align="center" height="121" valign="top"><div class="normalbullet" align="left">
<p class="main" align="center"><a href="#" target="_self" class="main" onclick="MM_openBrWindow('oracle_large.htm','','width=770,height=555')"></a></p>
<form>
<br>
<table width="80%" align="center" >
<tr align="center" class="main">
<td><input type="button" class="main" onClick="Book_Automated()" value="Auto Page Turn"></td>
<td><input type="button" class="main" onClick="Book_GoForWard()" value="<<"></td>
<td><input type="button" class="main" onClick="Book_GoBackWard()" value=">>"></td>
<td><input type="button" class="main" onClick="Book_Manual()" value="Manual Page Turn"></td>
</tr>
</table>
</form>
<div align="center"><br>
<span class="statement"></span>
</div>
</div></td>
</tr>
</tbody>
</table>
<div align="center"></div>
</body>
</html>
--------------------------------------------------------

**jscheuer1** · 12-09-2005, 10:05 PM

Originally Posted by mikep

only some of the images appear to display correctly

Define 'correctly'. Better yet, define 'incorrectly'.

I see from your code that you have changed the sequence of the images from what was apparently anticipated when you first numbered them. Is that what you are referring to, or is it something more? I've noticed with this script that the order in which the images get displayed seems to defy logic, especially after one run through.

Did you change:

function BookImages(){

at all? It doesn't seem to scan correctly in my editor but, it is a complex function, could just be the way I am looking at it.

Once I understand what your complaint is, it would be easiest for me to try to find a solution if you were to put the page up somewhere as a live demo. It wouldn't have to be linked to or from any of your other pages, just somewhere that I can see it with its images as an example of what I hope you are going to explain to me about what 'incorrectly' means.

**mikep** · 12-10-2005, 08:37 AM

Hi John

Thanks for your reply - although the images appear to be out of sequence, they are in the right order, as they actually form the basis of a book opening. If you have a look at http://www.mikepitches.plus.com/ld/oracle-test.htm, you'll see what we've done so far. Everything needs to stay the same, except that we want to use the new script to allow the user to control the book animation.
I hope this makes more sense...
Thanks, Mike

**mikep** · 12-10-2005, 08:49 AM

Sorry John, also meant to include the current URL we're working on:

www.mikepitches.plus.com/ld/index.htm - click on the Oracle page, and you'll see the problem we have.

Thanks, Mike

**jscheuer1** · 12-10-2005, 10:34 AM

Originally Posted by mikep

Sorry John, also meant to include the current URL we're working on:

www.mikepitches.plus.com/ld/index.htm - click on the Oracle page, and you'll see the problem we have.

Thanks, Mike

Ok, on that page (oracle) there are two major and one minor problem. First major problem - he has updated the array of images to include potential link targets as well as potential links. You use neither but, you still need the empty quotes for each per image, here is how your array should look (additions red):

Code:

	Book_Image_Sources=new Array(
		"images/back.jpg","","",
		"images/front.jpg","","",
		"images/p3.jpg","","",
		"images/p2.jpg","","",
		"images/p5.jpg","","",
		"images/p4.jpg","","",
		"images/p7.jpg","","",
		"images/p6.jpg","","",
		"images/p9.jpg","","",
		"images/p8.jpg","","",
		"images/p11.jpg","","",
		"images/p10.jpg","","",
		"images/p13.jpg","","",
		"images/p12.jpg","","",
		"images/p15.jpg","","",
		"images/p14.jpg","","",
		"images/p17.jpg","","",
		"images/p16.jpg","","",
		"images/p19.jpg","","",
		"images/p18.jpg","","",
		"images/p21.jpg","","",
		"images/p20.jpg","","",
		"images/p23.jpg","","",
		"images/p22.jpg","","",
		"images/p25.jpg","","",
		"images/p24.jpg","","",
		"images/p27.jpg","","",
		"images/p26.jpg","","",
		"images/p29.jpg","","",
		"images/p28.jpg","","",
		"images/p31.jpg","","",
		"images/p30.jpg","","",
		"images/p33.jpg","","",
		"images/p32.jpg","","",
		"images/p35.jpg","","",
		"images/p34.jpg","",""
		);

Second major - I have no idea what you are shooting for with all those images in the "Book" division but, it should look like so:

HTML Code:

	<div id="Book" style="position: absolute; left: 117px; top: 15px;">
      <img src="placeholder.gif" height="227" width="284">        </div>

The minor problem is that you have no placeholder.gif, get one.

**mikep** · 12-10-2005, 03:18 PM

Thank you so much John, seems so simple now, everything is working brilliantly...

Thread: Book Flip Slideshow

Thread Tools

Search Thread

Book Flip Slideshow

Book Flip Slideshow

Dynamic Drive - Book Flip slideshow (extended)

Dynamic Drive - Book Flip slideshow (extended)

Dynamic Drive - Book Flip slideshow (extended)

Dynamic Drive - Book Flip slideshow (extended)

Bookmarks

Bookmarks

Posting Permissions