View Full Version : Help with BookFlip Slideshow

04-17-2006, 03:06 PM
Script Name: BookFlip Slideshow

If someone could help me center this on the page, I would appreciate it. =) I've tried many things and still the slideshow will not center on the website. Thank you for your help. =)

04-17-2006, 03:10 PM
Another one who hasn't read the stickies.

04-17-2006, 03:15 PM
It's there? =/

04-17-2006, 03:57 PM
Of course, sorry. There was a flood of posts in which people hadn't read the stickies. Setting margin-left to 40% on the Book element is a fairly good approximation.

04-17-2006, 04:44 PM
Where exactly could I put that? I'm not real sure I see what you mean..lol.

04-17-2006, 05:05 PM
In your stylesheet, use:
#Book { margin-left: 40%; }

04-17-2006, 05:06 PM
If you are using a DOCTYPE* (most HTML editors do so by default), this type of thing works well:

<div id="Book" style="position:relative;width:404px;height:152px;margin:0 auto;">
<img src="placeholder.gif" width="404" height="152" />

The above uses the existing id="Book" division's style to center the slideshow. Notice that the width and height properties of the division are set to the width and height attributes of the placeholder image. These must be calculated using the formula listed on the demo page:

placeholder width: 2*book image width+4

placeholder height: book image height+2


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It must be the very first thing on your page before the (also shown) opening <html> or <HTML> tag. As I said, most HTML editors put one of these in automatically.

04-17-2006, 05:30 PM
I'm still not quite sure. I apologize. I'm conversing between you guys and the guy actually doing it..lol. If there's anyway I could send you the code we have, so you can show us how to center it? It would be greatly appreciated. =)

04-17-2006, 05:56 PM
I'd suggest having 'the guy' log on here and look at the posts. You can give him this address:


Or you could post a link to your page.

Or as a last resort, post the code, put code tags:

code goes here

around your code in messages here so that it looks like so:

code goes here

04-17-2006, 06:12 PM
"The guy" is John, btw. :P

And here's the link: http://www.chitchatterschat.com/shemmy/shemmy1.html

04-17-2006, 07:01 PM
The page is a bit of a mess but, I'm not inclined to go into all of the potential and actual problems it has. Your slideshow would have been centered already if the instructions on the demo page for the dimensions of the placeholder image had been followed. I admit that they aren't the clearest, but I didn't write them and they do state that the width should be 2* +4, you have have 1* +4 and that the height should be +2, you have +4. Anyways, use this:

<div id="Book" style="position:relative">
<img src="http://www.chitchatterschat.com/shemmy/placeholder.gif" width="604" height="227"></div>

BTW, only the one at the end of the script, after the closing </script> tag means anything. The one here:

* 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="304" height="229">
width = 2*book image width +4 height = book image height+2

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

is just a comment - instructions for folks using the script and its markup.

04-17-2006, 07:18 PM
That fixed it! =) Thank you very much.