need help inserting images in the Book Flip Slideshow

**jblack402** · 11-28-2009, 11:55 PM

1) Script Title: Book Flip Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

3) Describe problem: I cannot insert my own images on any of the image slide show scripts, after pasting the code on the book flipslide show the outline of the book shows but when I insert my image code it never works my images never show up, as a matter of fact I cannot get my images to show up in any of the image slide scrips. At the present time my site is not published to the internet I am building it on my home computer and the image I want to use is in a file on my desktop do I have to use the same image path that I use in html to show the image

**jscheuer1** · 11-29-2009, 02:31 PM

Yes you do. Use the (what would appear as) the src attribute in an image tag. So if you have like:

Code:

<img src="images/myImage.jpg" alt="">

Use that (highlighted) and if required in the script, quote it as shown in the example code for that script.

Notice that the folder slash goes up (/). This should be used for all paths on HTML pages, as once on the server this will be required. The desktop is a poor choice for images used in scripts. Either use the same folder that the page is in or make a folder off of that called images.

**jblack402** · 11-30-2009, 11:47 PM

I got the basic idea for inserting images in html but I am not familiar with java script
and the formating seems different for example I see brackets like these
[ ] do I place the entire image path between these brackets something like this
[<img src="images/myImage.jpg" alt="">] in html these [ ] are not used for a placing images I am still a bit confused based on the response I got i am told to not use img src and what about the < > signs should I also exclude them

**jscheuer1** · 12-01-2009, 03:30 AM

Book Flip has this section of code:

Code:

// 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
		);

/***************** DO NOT EDIT BELOW **********************************/

If you have an image tag like you say:

Code:

<img src="images/myImage.jpg" alt="">

If that works as an image tag, take the highlighted part and put it here:

Code:

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

	Book_Image_Sources=new Array(
		"images/myImage.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
		);

/***************** DO NOT EDIT BELOW **********************************/

**jblack402** · 12-01-2009, 03:22 PM

Thank you are a life saver thank you for your knowledge one last question how do I center the flip book as of now it appears on the side of the screen how do I center it and where will I insert the code in the script to do so, or should I place the entire script in a div and use css to center it?

**jscheuer1** · 12-01-2009, 04:24 PM

In the code it has:

Code:

/***********************************************
* 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()">	
*********************************************************/

All of that (highlighted and not highlighted) are just credit/comments/instructions. The highlighted part is comments/instructions. None of it does anything, it's all just for informational purposes, and unfortunately the instruction part is not real well thought out. It means to tell you what you should have here (highlighted section):

Code:

 . . . on 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">
		<img src="placeholder.gif" width="144" height="227">
	</div>

<p><font face="A . . .

But you really don't need the placeholder.gif or its image tag. What goes there should be like so:

Code:

<div id="Book" style="position:relative;width:144px;height:227px;margin:0 auto;"></div>

The margin:0 auto; is what will center it. The width and height (red and green, respectively in the above) should be as instructed (here stated a bit more clearly):

width = 2 times the Book_Image_Width + 4
height = Book_Image_Height + 2

Except if you are doing a vertical book (var Book_Vertical_Turn=1;). Then it's sort of reversed:

width = Book_Image_Width + 2
height = 2 times the Book_Image_Height + 4

But since you are probably not doing a vertical book, don't worry about that second one at the moment.

Now, the only other thing is that your page must have a valid URL DOCTYPE as the very first thing in its HTML source code. If it doesn't, this one is probably the one you should use*:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This goes at the very beginning of the source, ex:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

*I say probably because for a novice it is the least likely to cause problems, but the best one is:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

**jblack402** · 12-04-2009, 08:42 PM

another question for this book flip slide show can you put more than 4 images in it is set up for four images as of now is it possible to add more.

**jscheuer1** · 12-04-2009, 10:35 PM

You may have as many as you like, just follow the established pattern, ex (to add one more):

Code:

// 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",
		"photo5.jpg","http://www.google.com" // NOTE No comma after last line
		);

/***************** DO NOT EDIT BELOW **********************************/

The only limiting factor is reasonableness. Too many images on page, whether in a script or not, can make the page slow to load.

**jblack402** · 01-21-2010, 10:45 PM

I was informed by a helpful person on how to center the book flip image slide show using an auto margin but when I do that it does not line up center on the page with the other things on my page. I am using a table to align some links and images. I have the table set to be centered but when I use a auto margin it does not line up exactly centered with the links and other images. When I view the site on another computer screen bigger than my home computer screen its is usually not centered. what do I need to do to center this entire page the site is www.jblacksartnstuff.com even if I must change all the coding I can really use the expertise to center this page once and for all regardless what computer screen I am viewing it on. This is the code I was told to use to center the book flip but it does not line up with a centered table.

<div id="Book" style="position:relative;width:144px;height:227px;margin:0 auto;"></div>

**jscheuer1** · 01-22-2010, 12:44 AM

There could also be other problems but this:

Code:

<div id="Book" style="position:relative;width:144px;height:227px;margin-left:465px;"></div>

should be (for this particular book flip):

Code:

<div id="Book" style="position:relative;width:284px;height:227px;margin-left:465px;"></div>

That's 2 times the width of the image(s) + 4, or as stated in the instructions:

width = 2*book image width +4

Thread: need help inserting images in the Book Flip Slideshow

Thread Tools

Search Thread

need help inserting images in the Book Flip Slideshow

Thanks for the info

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

help with book flip image slide show

Bookmarks

Bookmarks

Posting Permissions