Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Image Slide Show - Book Flip Slide Show

  1. #1
    Join Date
    Jan 2005
    Posts
    58
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Image Slide Show - Book Flip Slide Show

    I am refering to the following link: http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

    Please someone tell me what I did wrong.

    I guess it must be something with the placeholder gif which I did download to folder on my hard disk - but where do I have to put it then?

    This is how I filled out the code:
    ---------------------------------------------------------------------------

    <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="553" height="431">
    </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=549;
    var Book_Image_Height=429;
    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(

    "http://www.host.com/user/imagefolder/image/photo1.jpg",
    "http://www.host.com/user/imagefolder/image/photo1.jpg",
    "http://www.host.com/user/imagefolder/image/photo1.jpg",
    "http://www.host.com/user/imagefolder/image/photo1.jpg" // NOTE No comma after last line
    );

  2. #2
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Did you Create a div with transparent place holder in your html which looks like this?

    Code:
    <div id="Book" style="position:relative">
    <img src="placeholder.gif" width="553" height="431">
    </div>
    And insert onload in body tag?
    Code:
    <body onload="ImageBook()">
    Please post your whole HTML file wrapped in [code] and [/code].

    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  3. #3
    Join Date
    Jan 2005
    Posts
    58
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your quick answer!

    Did you Create a div with transparent place holder in your html which looks like this? ... And insert onload in body tag?
    No, because I don't know how.

    The code I posted is all I did.

    Please give me an example for a complete HTML! (body)
    I mean how should the whole HTML look like? Write me the missing lines - please!

  4. #4
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    HTML Code:
    <html><head><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 [url]http://www.dynamicdrive.com/[/url] 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=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(
    		"photo1.jpg","http://www.dynamicdrive.com",
    		"photo2.jpg","http://www.javascriptkit.com",
    		"photo3.jpg","", //this slide isn't linked
    		"photo4.jpg","http://www.codingforums.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 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="144" height="227">
    	</div>
    
    <p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p></head><body onload="ImageBook()"><div id="Book" style="position:relative">
    		<img src="placeholder.gif" width="144" height="227">
    	</div></body></html>
    You will then need http://www.dynamicdrive.com/dynamici...laceholder.gif and photo1.jpg photo2.jpg photo3.jpg and photo4.jpg (your photos) in the folder.

    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  5. #5
    Join Date
    Jan 2005
    Posts
    58
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your answer => I will mark red, what I filled out - please controll it.

    <html><head>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=549;
    var Book_Image_Height=429;
    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(

    "http://www.host.com/user/imagefolder/image/photo1.jpg",
    "http://www.host.com/user/imagefolder/image/photo1.jpg",
    "http://www.host.com/user/imagefolder/image/photo1.jpg",
    "http://www.host.com/user/imagefolder/image/photo1.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="144" height="227">
    </div>

    <p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p></head><body onload="ImageBook()"><div id="Book" style="position:relative"> <img src="http://www.dynamicdrive.com/dynamicindex14/placeholder.gif" width="553" height="431"> </div></body></html>
    Last edited by Peppy; 01-29-2005 at 09:19 PM.

  6. #6
    Join Date
    Jan 2005
    Posts
    58
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Could solve some problems by using MFP
    Last edited by Peppy; 01-29-2005 at 10:58 PM.

  7. #7
    Join Date
    Jan 2005
    Posts
    58
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    NEW SITUATION:

    It works very good with my Microsoft FrontPage - only Problem it shows only first 4 pix and I want 8 to show up - what's wrong?

  8. #8
    Join Date
    Jan 2005
    Posts
    58
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I still have the problem, that only 4 pics show up and

    can someone tell me the line where position is defined where the book appears? I want to put it more to the left!

    Thank you!

  9. #9
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Peppy.

    Please thoroughly read the instructions on the script page. It is honestly all there.

    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  10. #10
    Join Date
    Jan 2005
    Posts
    58
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Please tell me the lines - I could not find them.
    I don't want to "demage" the whole code by chaning the wrong letters or numbers!

    THANK YOU!

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
  •