book flip - Forums - CreateBlog

Log In · Register

Forums / Resource Center / Support Center / Xanga Support / Xanga Resolved Topics

book flip, xanga pictures

Dick_and_Jane View Profile View Subprofile	Nov 2 2005, 08:11 PM Post #1
Senior Member Group: Member Posts: 31 Joined: Oct 2005 Member No: 266,798	I found this at dynamicDrive.com but can't seem to put it into Xanga format. I love this book flip for pictures, but would like to know how to do this either in weblog entry if that's possible or if not, then how it can be used. Thanks Directions Step 1: Insert the below script into the BODY section of your page where you wish the slideshow to appear: Select All <!-- begin code provided by createblog.com --><br /><script type="text/javascript"><br /><br />/**********************************************<br /> Book Flip slideshow script- © Ger Versluis 2003<br />* Permission granted to DynamicDrive.com to feature script<br />* This notice must stay intact for use<br />* Visit http://www.dynamicdrive.com/ for full source code<br />*********************************************/<br /><br />/*****************************************************<br /> Create a div with transparent place holder in your html <br /> <div id="Book" style="position:relative"><br /> <img src="placeholder.gif" width="144" height="227"><br /> </div><br /> width = 2book image width +4 height = book image height+2<br /><br /> Insert onload in body tag<br /> <body onload="ImageBook()"> <br />*******************************************************/<br /><br />// 7 variables to control behavior<br /> var Book_Image_Width=140;<br /> var Book_Image_Height=225;<br /> var Book_Border=true;<br /> var Book_Border_Color="gray";<br /> var Book_Speed=15;<br /> var Book_NextPage_Delay=1500; //1 second=1000<br /> var Book_Vertical_Turn=0; <br /><br />// array to specify images and optional links. At least 4<br />// If Link is not needed keep it ""<br /><br /> Book_Image_Sources=new Array(<br /> "photo1.jpg","http://www.dynamicdrive.com",<br /> "photo2.jpg","http://www.javascriptkit.com",<br /> "photo3.jpg","", //this slide isn't linked<br /> "photo4.jpg","http://www.codingforums.com" // NOTE No comma after last line<br /> );<br /><br />/************* DO NOT EDIT BELOW *******************************/<br /> var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;<br /> var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);<br /><br /> function ImageBook(){<br /> if(document.getElementById){<br /> for(i=0;i<Book_Image_Sources.length;i+=2){<br /> B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}<br /> Book_Div=document.getElementById("Book");<br /> B_LI=document.createElement("img");Book_Div.appendChild(B_LI); <br /> B_RI=document.createElement("img");Book_Div.appendChild(B_RI);<br /> B_MI=document.createElement("img");Book_Div.appendChild(B_MI); <br /> B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";<br /> B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;<br /> B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";<br /> B_LI.style.left=0+"px";<br /> B_MI.style.top=0+"px";<br /> B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";<br /> B_RI.style.top=0+"px";<br /> B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";<br /> B_LI.style.height=Book_Image_Height+"px";<br /> B_MI.style.height=Book_Image_Height+"px";<br /> B_RI.style.height=Book_Image_Height+"px";<br /> B_LI.style.width=Book_Image_Width+"px";<br /> B_MI.style.width=Book_Image_Width+"px";<br /> B_RI.style.width=Book_Image_Width+"px";<br /> if(Book_Border){<br /> B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";<br /> B_LI.style.borderWidth=1+"px";<br /> B_MI.style.borderWidth=1+"px";<br /> B_RI.style.borderWidth=1+"px";<br /> B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_B<br />rder_Color}<br /> B_LI.src=B_Pre_Img[0].src;<br /> B_LI.lnk=Book_Image_Sources[1];<br /> B_MI.src=B_Pre_Img[2].src;<br /> B_MI.lnk=Book_Image_Sources[3];<br /> B_RI.src=B_Pre_Img[4].src;<br /> B_RI.lnk=Book_Image_Sources[5];<br /> B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;<br /> B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;<br /> B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;<br /> BookImages()}}<br /><br /> function BookImages(){<br /> if(!B_Stppd){<br /> if(Book_Vertical_Turn){<br /> B_MSz=Math.abs(Math.round(Math.cos(B_Angle)Book_Image_Height));<br /> MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;<br /> B_MI.style.top=MidOffset+"px";<br /> B_MI.style.height=B_MSz+"px"}<br /> else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)Book_Image_Width));<br /> MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;<br /> B_MI.style.left=MidOffset+"px";<br /> B_MI.style.width=B_MSz+"px"}<br /> B_Angle+=Book_Speed/720Math.PI;<br /> if(B_Angle>=Math.PI/2&&B_Direction){<br /> B_Direction=0;<br /> if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;<br /> B_MI.src=B_Pre_Img[B_CrImg].src;<br /> B_MI.lnk=Book_Image_Sources[B_CrImg+1];<br /> B_CrImg+=2}<br /> if(B_Angle>=Math.PI){<br /> B_Direction=1;<br /> B_TI=B_LI;<br /> B_LI=B_MI;<br /> B_MI=B_TI;<br /> if(Book_Vertical_Turn)B_MI.style.top=0+"px";<br /> else B_MI.style.left=Book_Image_Width+1+"px"; <br /> B_MI.src=B_RI.src;<br /> B_MI.lnk=B_RI.lnk;<br /><br /> setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}<br /> else setTimeout("BookImages()",50)}<br /> else setTimeout("BookImages()",50)}<br /><br /> function Book_Next_Delay(){<br /> if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;<br /> B_RI.src=B_Pre_Img[B_CrImg].src;<br /> B_RI.lnk=Book_Image_Sources[B_CrImg+1];<br /> B_MI.style.zIndex=2;<br /> B_LI.style.zIndex=1;<br /> B_Angle=0;<br /> B_CrImg+=2;<br /> setTimeout("BookImages()",50)}<br /><br /> function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}<br /> function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}<br /> function B_Rstrt(){B_Stppd=false}<br /></script><br /><br /> <div id="Book" style="position:relative"><br /> <img src="placeholder.gif" width="144" height="227"><br /> </div><br /><br /><p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p><br /><!-- end code provided by createblog.com --> Step 2: Download the below image "placeholder.gif", which the above script requires and references:THE IMAGE HERE IS A BOX (enlarged for easier download. Right click and choose "Save As"). Step 3: Finally, add the below onload event handler inside the <BODY> tag itself: <body onload="ImageBook()"> That's a wrap. Read on for important customization info. Customizing the script All changes to the script takes place in the code of Step 1, which is documented for the purpose. First, customize the 7 variables near the top of the script per the comments. Then, locate the <DIV> tag at the bottom of the code, which reads: <div id="Book" style="position:relative"> <img src="placeholder.gif" width="144" height="227"> </div>You now need to change the width and height of the "placeholder.gif" image above using the preset formula: placeholder width: 2book image width+4 placeholder height: book image height+2 Note that if you set the slideshow to flip vertically, then the width and height settings need to be interchanged, so placeholder width= book image width+2, and placeholder height= 2book imageheight+4. And that's it. FYI the above customization steps are repeated within the script for easy reference.
[Up]	[Quote]

Start new topic

Replies (1 - 1)

talcumpowder View Profile View Subprofile	Nov 2 2005, 08:15 PM Post #2
You'll find me in your dreams. Group: Official Member Posts: 8,536 Joined: Mar 2005 Member No: 114,010	Get free hosting. Make a new HTML page and insert above code. Now, make an iframe and make it call up your slideshow page (full url). Encode it @ Codehouse and place in Xanga entry. Don't forget to check "Edit HTML"!
[Up]	[Quote]

« Next Oldest · Xanga Resolved Topics · Next Newest »

Closed Topic

Start new topic

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)

0 Members:

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic