Book Flip slideshow won't display

**rscwebsite** · 06-16-2010, 01:56 PM

I wish to use the Book Flip slideshow script- © Ger Versluis 2003 on my web page but am unable to get it to work. I have put the images up and also have it in the correct space but it just won't work. Can anyone help please??
Thank you, Patricia
Here is my code:

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type"
          content="text/html; charset=us-ascii" />
    <title>
      Religious Sisters of Charity
    </title>
    <meta name="keywords"
          content=
          "Religious, Sisters, Charity," />
    <meta name="description"
          content=
          "Welcome" />
    <link href="style.css"
          rel="stylesheet"
          type="text/css"
          media="screen" />
<script type="text/javascript"
      src="textsizer.js">
//<![CDATA[

/***********************************************
* Document Text Sizer- Copyright 2003 - Taewook Kang.  All rights 

reserved.
* Coded by: Taewook Kang (http://www.txkang.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
  </head>
  <body onload="ImageBook()">
    <div id="logo">
      <h1>
        Religious Sisters of Charity
      </h1>
      <h2>
        English/Scottish Province
      </h2>
    </div>
    <div id="menu">
      <ul>
        <li class="first">
          <a href="default.html"
              accesskey="1">Home</a>
        </li>
        <li>
          <a href="aboutus.html"
              accesskey="2">About Us</a>
        </li>
        <li>
          <a href="news.html"
              accesskey="3">News &amp; Events</a>
        </li>
        <li>
          <a href="prayer.html"
              accesskey="4">Prayer Space</a>
        </li>
        <li>
          <a href="locations.html"
              accesskey="5">Locations and History</a>
        </li>
      </ul>
    </div>
    <div id="banner">
      <img src="images/banner_contactus.jpg"
           alt="England &amp; Scotland"
           width="960"
           height="147" />
    </div><!-- start page -->
    <div id="page">
      <!-- start content -->
      <div id="content">
        <div id="textsize">
          <a href="javascript:ts('body',1)">+ Larger Font</a> |
          <a href="javascript:ts('body',-1)">+ Smaller Font</a>
        </div>
        <div class="post">
          <h2 class="title">
            Contact Us
          </h2>
          <div class="entry">
            <script type="text/javascript">
//<![CDATA[


/***********************************************
* 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=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(
    "bookflip001_eithne.jpg","",
    "bookflip002_rose.jpg","",
    "bookflip003_joanna.jpg","",//this slide isn't linked
    "bookflip004_annecamillus.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="absol

ute";
      

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.borderSty

le="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.borderCol

or=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;width:292px;height:229px;margin:0 auto;">
		<img src="placeholder.gif" width="292" 

height="229" />
	</div>
            If you would like to contact us,<br />
            please either write to:<br />
            <br />
            The Vocations Office<br />
                      </div>
        </div>
      </div><!-- end content -->
      <!-- start sidebar -->
      <div id="sidebar">
        <ul>
          <li>
            <h2>
              <a href="dayinthelife.html">A Day in the Life
              of...</a>
            </h2>
          </li>
          <li>
            <h2>
              <a href="religiouslife.html">Religious Life</a>
            </h2>
          </li>
          <li>
            <h2>
              <a href="questions.html">Questions</a>
            </h2>
          </li>
          <li>
            <h2>
              <a href="contactus.html"
                  class="active">Contact Us</a>
            </h2>
          </li>
          <li>
            <h2>
              <a href="links.html">Links</a>
            </h2>
          </li>
        </ul>
      </div><!-- end sidebar -->
    </div><!-- end page -->
    <div id="footer">
      <p class="legal">
        &copy; 2010 RSC England/Scotland. Registered Charity No.
        231323.<br />
        <a href="legal.html">Copyright, Disclaimer and
        Updates</a>
      </p>
      <p class="credit">
        <a href="accessibility.html">Accessibility
        Statement</a><br />
        Designed by <a href="http://www.freecsstemplates.org/"
           target="_blank">Free CSS Templates</a>
      </p>
    </div>
  </body>
</html>

**azoomer** · 06-16-2010, 03:37 PM

I have tried to clean up the code a bit and got the bookflip working. I have put the files in a zip folder that is attached. Download it, unzip it, open the sisters folder and open index.html in your browser to see if it works. You need to put the style.css and the textsizer.js in the same folder. I had to use some other images because I didn't have yours, so you will have to replace those. Hope it works, otherwise post a link to the page on your server, that way it will be easier to help.

**rscwebsite** · 06-16-2010, 08:28 PM

azoomer,
It works perfectly now - Thank YOU!

Thread: Book Flip slideshow won't display

Thread Tools

Search Thread

Book Flip slideshow won't display

The Following User Says Thank You to azoomer For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions