Results 1 to 3 of 3

Thread: Book Flip Issues

  1. #1
    Join Date
    Aug 2006
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Book Flip Issues

    I've read several posts and tried them all but the bookflip slideshow still isn't quite centered.

    And I am calling images that are 620 wide x 1630. I have changed the size of the table to match. Why are they showing up so small?

    Please see www.webs2impress.com/cynthia/menu_new.html

    Thanks in advance.
    Last edited by jscheuer1; 07-23-2012 at 12:58 AM. Reason: merge

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Please post new questions in a new thread like here where I've moved this, and:

    Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.


    For now though, I see what you mean. Try it like so:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>CynShea's Restaurant and Catering - Huntsville, Alabama, Madison, North, upscale catering and restaurant, gourmet coffee shop, fresh-baked pastries and breads, sandwiches, sandwich, soup, soups, salad, salads, inhouse smoked meats, Saturday, jazz, brunch, shrimp, grits, panini</title>
    <META NAME="description" CONTENT="Cyn Shea’s Complete Catering is a Huntsville, North Alabama, Mid-Tennessee caterer that offers services for special events, wedding receptions, corporate parties & celebration dinners for any budget."><META NAME="keywords" CONTENT="Cater, Caterer, Caters, Caterers, Catering, Bakery, Party , Venue, Parties, Bakeries, Cyn Shae’s, Cynshaes, Gourmet, Gourmet foods, Lunch, Lunches, Downtown, Breakfast, Breakfasts, Brunch, Brunches, Wedding, Weddings, Bar mitzvah, Bar mitzvahs, Bat mitzvah, Bat mitzvahs, Party trays, Tailgate, To go foods, Delivery, Delivery service, Deliveries, Christian, Christian music, Spirit filled, Eatery, Bistro, Huntsville, Madison County, North Alabama, Middle Tennessee, Northern Alabama, Downtown Huntsville, Railroad District, Railroad Depot, Church Street, Railroad tracks, Huntsville Visitors Center, Visitors center, Bryant Bank, Village Depot, Betty Hughes Properties, Ken McDaniel Homes, Way fm, Cookies, Muffins, Pastries, Pastry, Webs 2 impress, Murray wilton ministries, Fresh Wind Fellowship, Cyn Sheas Express, Christmas parties, Thanksgiving feast, Scottsboro Alabama, Athens Alabama, Decatur Alabama, Hartselle Alabama, Fayetteville Tennessee, Florence Alabama, Moulton Alabama, Mussel shoals Alabama, Cullman Alabama, Prom dinners, Graduation dinners, Baby showers, Rehearsal dinners, Retirement dinners, Anniversary dinners, Gift baskets, Edible baskets, Edible gifts, Valentine’s gift basket, Valentine’s gifts, Vermont maple, New Orleans, Live music, Live entertainment, Stage, Free wifi, 4 star restaurant, 5 star restaurant, Made from scratch, House made">
    <META NAME="ROBOTS" Content="ALL">
    <META NAME="robots" CONTENT="index,follow">
    <META NAME="rating" CONTENT="general">
    <META NAME="language" CONTENT="english">
    <META NAME="country" CONTENT="usa">
    <META NAME="DISTRIBUTION" Content="Global">
    <META NAME="identifier" CONTENT="http://www.cynsheas.com/">
    <META NAME="organization-Email" CONTENT="cynthia@cynsheas.com">
    <META NAME="classification" CONTENT="catering,cater,food,huntsville,alabama,north">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="default.css" rel="stylesheet" type="text/css">
    </head>
    
    <body bgcolor="#000000" onload="ImageBook()"  style="text-align: center" leftmargin="0" topmargin="20" marginwidth="0" marginheight="0">
    <table width="1241" border="0" cellspacing="0" cellpadding="0" style="margin: auto; border-collapse: collapse; border-spacing: 0; position: relative; left: -1px;">
    <tr>
    <td height="5" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr> 
    <td height="5" bgcolor="#000" style="font-size: 1px;">&nbsp;</td>
    </tr>
    <tr> 
    <td height="175" bgcolor="#FFFFFF"><div align="center"> 
    <p><img src="images/FINAL-cyn-shea-logo_web.jpg" width="550" height="155"></p>
    </div></td>
    </tr>
    </table>
    <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=620;
    	var Book_Image_Height=1630;
    	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(
    		"Menus_and_Boards/menu_01.jpg","",
    		"Menus_and_Boards/menu_02.jpg","",
    		"Menus_and_Boards/menu_03.jpg","",
    		"Menus_and_Boards/menu_04.jpg","",
    		"Menus_and_Boards/menu_05.jpg","",
    		"Menus_and_Boards/menu_06.jpg","",
    		"Menus_and_Boards/menu_07.jpg","",
    		"Menus_and_Boards/menu_08.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" class="centerdiv;" style="position:relative">
    <img src="placeholder.gif" width="620" height="1630">
    </div> -->
    <div id="Book" style="position:relative;width:1244px;height:1632px;margin:0 auto;">
    		<img src="placeholder.gif" width="1244" height="1632" />
    	</div>
    <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
    <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
    
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default I figured this out

    There is another place in the code where you have to specify the height and width:

    var Book_Image_Width=310;
    var Book_Image_Height=815;
    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;
    I did not see this noted anywhere in the instructions on setting this up.

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
  •