View Full Version : Book Flip Slideshow

04-28-2005, 10:10 PM

I have tried to use this script both in Open Office and Frontpage and can get nowhere.
I am unable to insert the placeholder.gif and also cannot insert the image url's.

The whole script is very confusing when viewing. I am not sure what to replace. It might be better to colour code the only peices we need to change, that way it might make it a bit clearer.

Can anybody help me with these problems please.


04-29-2005, 05:14 AM
This is at least the fourth time I've read your post and for the life of me, I barely know where to begin. I've tried thinking back to my first Dynamic Drive Script. It was confusing. I didn't even know HTML that well and well, this JavaScript stuff . . . mmmm . . . very strange. I had one advantage, I think, over you, starting out. I was already 'getting under the hood' a little bit, using notepad to look at the HTML code and seeing if I couldn't do a better job than my WYSIWYG editor was doing, at least on some things. That may well be the best way to go about it. These scripts can be inserted via an editor like you are using but, generally they have to be fully configured first and just dropped in. Even then, depending upon your editor's configuration, it may alter one or more crucial parts of the script. I'd recommend getting comfortable, or at least trying out a text editor. Notepad isn't so bad to start with but, if you like it you will want to get a more robust one. I realize none of this may seem to answer your questions. So, I'll take a stab -

I am unable to insert the placeholder.gif and also cannot insert the image url's.it says to:

Create a div with transparent place holder in your html
<div id="Book" style="position:relative">
<img src="placeholder.gif" width="144" height="227">
width = 2*book image width +4 height = book image height+2this part:

<div id="Book" style="position:relative">
<img src="placeholder.gif" width="144" height="227">
</div>is how it will look (colors may vary or be all one color in your editor) in a text editor on your page, or in the source code view, if you are going to use another type editor. This part:

width = 2*book image width +4 height = book image height+2

instructs us to make the width value twice the the width of one image plus 4 and assumes that all images for the slideshow are the same size (for this script they have to be). It also tells us to make the height the height of an image plus 2.

Now where does this go? It (with the script after it) goes right into the source code of your page at the spot where you want the slideshow to be. The placeholder.gif must be in the same directory as your page. Were you able to download it or otherwise obtain a copy of placeholder.gif?

Next, it says:

Insert onload in body tag
<body onload="ImageBook()">

That means, find the body tag in the source code. It will look like this:


except it may have a bunch of things in there, no real way to know exactly what (highlight red):

<body bgcolor="#FFFFFF" text="#000000" link="#DFDFDF">

You need to add one more thing (or the only thing, if nothing else is there) in there, like this:

<body bgcolor="#FFFFFF" text="#000000" link="#DFDFDF" onload="ImageBook()">

OK, the variables and images(red is what you can change):

// 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;
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(
"photo3.jpg","", //this slide isn't linked
"photo4.jpg","http://www.codingforums.com" // NOTE No comma after last line
);Now you can change the links (blue) too if you want or just leave empty quotes "" (brown in the example) behind as placeholders if you don't want links. The 7 variables are pretty clear except for speed, delay, and vertical turn. The speed is how fast a page turns (experiment if you don't like the current setting), delay is how long between page turns in milliseconds (1000=1 second). Vertical_Turn is 0 for no and 1 for yes. 0, the book turns horizontally, 1, it turns vertically.

For the images in red above, you substitute in your image filenames. The files must be in the same directory as your page.

Don't get discouraged, I'm sure you will get it if you don't give up.

05-01-2005, 03:15 AM
I am fairly new to this. They say I am not supposed to ask how to put 2 scripts on one page...but...the tutorial doesn't explain how to put 2 or more flip books on the same page. I have tried and tried and cannot seem to get it. I have done one successfully. This is for my church. (www.newlifesanctuary.org) I need 3 flip photo albums on one page. I am using FrontPage 2002. I would greatly appreciate any help. :rolleyes: Thanx, shirlee

05-01-2005, 04:10 AM
The easiest way would be to put one on the page you want it on. Then put the other two on seperate pages and have them be seen on the page with the first one through Iframes.

05-01-2005, 12:08 PM
Hi, :)
Thanks alot for the info and your quick response. I am so new to this that I am not sure what Iframes are. Sounds like a way to point to the actual info. I will research Iframes. Any bit of information you could give me would be greatly appreciated.
Thanks Again,

05-01-2005, 05:13 PM
Yes, Inline Frames are just that. Iframes can be used just like any other block level element like paragraph or division but, what they do is display another HTML page within their borders. Code for an Iframe has many configurable attributes including Style so, you generally can get them to look however you like including, as you may wish to do for this, look like they are not even there. Here is a good example:

<iframe width="360" height="190" src="slideshow2.htm" frameborder="0" scrolling="no"></iframe>Note the width and height, they should be set to just a bit larger than the content to get the contained page to appear fully on the container page. Make the background color for the contained page be the same as the container page and, viola! It will look like all one page.

05-01-2005, 08:05 PM
Hi John,
Thanks alot for your help. I will work on this project tonight. I'm sure I will look you up again sometime soon.
Be Blessed, shirlee

05-21-2005, 10:12 PM
I too am using this slideshow. I'm having a problem with inserting urls for the pictures. The pictures are in the same directory as the file, but when i test the page in dreamweaver browser, the pictures are not found. What am i doing wrong?!?! :confused:

05-22-2005, 03:46 AM
Well, I no nothing about dreamweaver. Have you tested it in your regular browser? What does your code look like?

05-22-2005, 10:23 AM
I've doubled checked the code and it seems to be spot on. The dreamweaver browser uses internet explorer to check how the page will look once you have uploaded it - and all my pictures are missing!! The usual problem is directory but i've checked this to no avail. Any help would be greatly appreciated! :confused:

05-22-2005, 10:32 AM
I'd need more to go on to really help. Could you upload a demo somewhere I could have a look at it? It doesn't have to work, just upload the images and the page you have so far.

05-28-2005, 03:05 AM

I am also having trouble with the flip book. The book does not appear, I only get a square with an x. I think I have the code entered correctly.
Could you please check my code on the following page to see what I am doing wrong? Thank you.http://www.buddiesbuddies.org/events.htm

06-25-2005, 06:44 PM
The pictures are in the same directory as the file, but when i test the page in dreamweaver browser, the pictures are not found.
I am relatively new to Dreamweaver, but have found the same problems viewing images in the Design page. It doesn't actually work much like a browser, and in fact I find it is less helpful than saving your file and opening it up again in a favourite browser - a little more time consuming, unless you use the F12 option, which will prompt you to save the file anyway.

To start, put all your images in the same folder as your HTML file, and call them simply by referring to them by name.

<img src="mypic.gif">
It should pick up the images readilly enough.

When it comes to uploading your files to your site, put images in a seperate folder (for example "images") and change the references to:

<img src="../images/mypic.gif">
If you move the images from one folder to another in your File Panel to the right of the Dreamweaver window, the program will search through your files and automatically update the new locations in the <img src..> parts of your code.

Note that the Design page wo'n't format the screen in the way that your browser will, so don't be put off if it looks a complete mess until you view it through IE, etc.

09-15-2005, 08:02 AM
Good Morning

In your opinion it's possible FLIP HTML PAGES instead images ?

thks for your time

Claudio Ancillotti