Book Flip Slideshow

**sueruser** · 04-28-2005, 10:10 PM

http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

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.

**jscheuer1** · 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 -

Originally Posted by sueruser

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

it says to:

Originally Posted by DD instructions

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

this part:

HTML Code:

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

<body>

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):

Code:

// 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(
"photo1.jpg","http://www.dynamicdrive.com",
"photo2.jpg","http://www.javascriptkit.com",
"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.

**shirlee** · 05-01-2005, 03:15 AM

Hi,
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.

Thanx, shirlee

**jscheuer1** · 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.

**shirlee** · 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,
shirlee

**jscheuer1** · 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:

HTML Code:

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

**shirlee** · 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

**candy** · 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?!?!

**jscheuer1** · 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?

**candy** · 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!

Thread: Book Flip Slideshow

Thread Tools

Search Thread

Book Flip Slideshow

2 Flip Book Slide Shows On One Page

Flip Book...iframes

Many Thanks

Bookmarks

Bookmarks

Posting Permissions