PDA

View Full Version : Book Flip Issues



annasue
07-22-2012, 10:42 PM
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.

jscheuer1
07-23-2012, 01:31 AM
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 (http://www.dynamicdrive.com/forums/showpost.php?p=7) for more information.

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


<!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>

annasue
07-24-2012, 11:50 AM
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.