Results 1 to 3 of 3

Thread: Flip Book Slideshow Help Please

  1. #1
    Join Date
    Dec 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Flip Book Slideshow Help Please

    I have tried to make a flip book slideshow as submitted by Ger Versluis. I keep getting an error message that "Book_Div is null or not an object."

    Here is my page: http://marymargaret.home.att.net/sam.htm

    <html>

    <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1">
    <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
    <title>Samantha Paige'</title>
    </head>

    <body bgcolor="#FFFFFF" onload="ImageBook()">

    <p><font color="#FF0000" size="7" face="Andy">Samantha Paige's
    Christmas Page . . .</font><font color="#FF0000" size="5"
    face="Andy">or is it Samantha Page's Christmas Paige? or is it
    Christmas Paige's Samantha Page?</font><font color="#FF0000"
    size="5"><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 placeholder in your html
    <div id="Book" style="position:relative">
    <img src="placeholder.gif" width="454" height="302">
    </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=225;
    var Book_Image_Height=300;
    var Book_Border=true;
    var Book_Border_Color="red";
    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(
    "sam94c.jpg","",
    "sam95c.jpg","",
    "sam96c.jpg","",
    "sam97c.jpg","",
    "sam98c.jpg","",
    "sam99c.jpg","",
    "sam00c.jpg","",
    "sam01c.jpg","",
    "sam02c.jpg","",
    "sam03c.jpg","", //this slide isn't linked
    "sam04c.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></font> </p>

    <p><img src="placeholder.gif" width="454" height="302"> </p>

    <p><font size="1" face="Arial">Free DHTML scripts provided by<br>
    </font><a href="http://www.dynamicdrive.com"><font size="1"
    face="Arial">Dynamic Drive</font></a></p>

    <p><font size="1" face="Arial">Return to </font><a
    href="http://marymargaret.home.att.net/home.htm"><font size="1"
    face="Arial">home</font></a></p>
    </body>
    </html>

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

    Default

    At the bottom of your script, (around 10 lines from </html>) , you have this line of code:

    <img src="placeholder.gif" width="454" height="302">

    Which should read:

    <div id="Book" style="position:relative">
    <img src="placeholder.gif" width="454" height="302">
    </div>

    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
    Dec 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you for your assistance

    I haven't loaded all my photos yet, but I can see now that it works. It makes me wonder if Front Page Express deleted the lines that I needed. Happy new year!

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
  •