Book Flip Pre Load

[Markxxx]

1) Script Title: Book Flip

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

3) Describe problem: No problem really more a question

I love this and it works great, here's the question. I have a ton of images about 700 in all. The script of course is very slow which I understand with this many images.

Is there anyway to "preload" these images so the flipping will be seamless or with this many images is it best to try another type of viewer or do multiple viewers.

It's just I love the script and it does work great

[jscheuer1]

The images are already preloaded by the script. But they are preloaded all at once, and the script starts without respect to the loaded state of the images. It could be worked out to have the images preload incrementally, and to have the start of flipping be delayed until the first few images are loaded, and subsequently delay each page turn if the next image isn't yet available. This would, in some cases (especially on dial up) slow the progress of the flipping until all of the images were loaded.

However, if you optimize your images (so that they are of the smallest possible byte size) and arrange to have the first few preloaded on a previous page, that would also probably do the trick for most users.

Either way, you should optimize the images for the smallest possible byte load.

[jscheuer1]

Here's a little demo I just worked out of my first idea:

http://home.comcast.net/~jscheuer1/s...ip_preload.htm

Use your browser's 'view source' to get the code. Note that I've eliminated the use of the placeholder image. I've substituted a table that will place the text:

Loading . . .

centered within the area until the first 4 images become available. You should set this table's cell's width and height as though it were the placeholder:

<div id="Book" style="position:relative">
   <table style="border-collapse:collapse;table-layout:fixed;"><tr>
   <td style="width:284px;height:227px;text-align:center;vertical-align:middle;margin:0;padding:0;">Loading . . .
   </td></tr></table>
</div>

Leave the rest of the style for the table and its cell 'as is'.

One drawback to this approach is that if there are images missing, the script will simply stop in some browsers. Just make sure that all of the images listed in your array are on the server.

[jscheuer1]

I played around with this script a bit more and discovered that the original script and my above modification have a number of problems. As a result, I've written a simplified version with only one exposed global. It no longer requires the place holder or any HTML code, just place it in the body of your page where you want the Book Flip to appear:

<script type="text/javascript">

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

	var 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","", //this slide isn't linked
		"photo5.jpg","", //this slide isn't linked
		"photo6.jpg","", //this slide isn't linked
		"photo7.jpg","", //this slide isn't linked
		"photo8.jpg","", //this slide isn't linked
		"photo9.jpg","http://www.codingforums.com" // NOTE No comma after last line
		);

/***************** DO NOT EDIT BELOW **********************************/
var BI_W=Book_Vertical_Turn? Book_Image_Width+2 : Book_Image_Width*2+4;
var BI_H=Book_Vertical_Turn? Book_Image_Height*2+4 : Book_Image_Height+2;
document.write('<div id="Book" style="position:relative;width:'+BI_W+'px;height:'+BI_H+'px;">'+
'   <table style="width:'+BI_W+'px;height:'+BI_H+'px;border-collapse:collapse;table-layout:fixed;"><tr>'+
'   <td style="width:'+BI_W+'px;height:'+BI_H+'px;text-align:center;vertical-align:middle;margin:0;padding:0;">Loading . . .'+
'   <\/td><\/tr><\/table><\/div>');

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

	 flipit.ImageBook=function(loading){
			var i;
			if(!loading)
			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]}
			for(i=0;i<7;i+=2)
				if(typeof B_Pre_Img[i].complete=='boolean' && !B_Pre_Img[i].complete){
				setTimeout('flipit.ImageBook(1)', 300);
				return;
				}
			var 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.alt="Loading . . .";	
			B_RI.alt="Loading . . .";	
			B_MI.alt="Loading . . .";	
			B_LI.title="";	
			B_RI.title="";	
			B_MI.title="";	
			B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
			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.borderStyle="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.borderColor=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=flipit.B_LdLnk;
			B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=flipit.B_Stp;
			B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=flipit.B_Rstrt;
			flipit.BookImages()}

	 flipit.BookImages=function(){
		if(B_CrImg>6&&B_Pre_Img[B_CrImg]&&typeof B_Pre_Img[B_CrImg].complete=='boolean'&&!B_Pre_Img[B_CrImg].complete){
			setTimeout('flipit.BookImages()', 300);
			return;
			}
		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;  //inc
				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("flipit.Book_Next_Delay()",Book_NextPage_Delay)}
			else setTimeout("flipit.BookImages()",50)}
		else setTimeout("flipit.BookImages()",50)}

	 flipit.Book_Next_Delay=function(){
		if(B_CrImg>6&&B_Pre_Img[B_CrImg]&&typeof B_Pre_Img[B_CrImg].complete=='boolean'&&!B_Pre_Img[B_CrImg].complete){
			setTimeout('flipit.Book_Next_Delay()', 300);
			return;
			}
			if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
			B_RI.src=B_Pre_Img[B_CrImg].src; //inc
			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("flipit.BookImages()",50)}

	 flipit.B_LdLnk=function(){if(this.lnk)window.location.href=this.lnk}
	 flipit.B_Stp=function(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
	 flipit.B_Rstrt=function(){B_Stppd=false}
	flipit.ImageBook();
	};
if(document.getElementById&&document.images)
flipit();
</script>

[Markxxx]

You know what I screwed this question up a bit

jscheuer1 when I originally decided to use this script you told me to look at

http://www.burmees.nl/menu/bookextended.html

For other options. And I did and these options are great.

So I am using the script off that site with the manual option only. You need to press the forward and back keys.

When I run it and the number of images is under 100 on high speed it runs fine, It takes 30 seconds or so to download and moves seemlessly. Now that there is 700 images, it takes about 4 minutes before the first image appears. I am assuming they are preloading. But then the viewer doesn't always work seemlessly

Some images appear right away and others are being called up. I can tell by watching the computers left hand corner and it says "getting images." So not all of them are preloading.

Perhaps with this many images (over 700) it isn't a good option to use this type of viewer?

I don't mind having the person wait 5 mintues for the images to load if once it's over they are all downloaded. But now what happens is let's say you press forward and it goes find. But one image is labled 005. jpg and when I get to what should be 105.jpg (100 images later) you first see the jpg titled 005.jp then you can see the computer calling up 105.jp and it replaces it.

So it does work but it's far from seemless.

I'm not sure if you can preload that many images effectively, but I thought I'd ask if there was anyway or if I should just think about another type of image gallery for such a large number of images.

Thanks

[jscheuer1]

The incremental preloading routines I developed for both modifications already in this thread should be able to be adapted to the extended version. However, to do so optimally, for how you are using it, it would be best to see your current page, as it is so far:

Please post a link to the page on your site that contains the problematic code so we can check it out.

I'm thinking of something very similar to the Swiss Army script I wrote:

http://www.dynamicdrive.com/dynamici...army/index.htm

which preloads an image 'ahead' in either direction, while the current image is displayed. But, as I say, I'd prefer to see what you have so far, rather than guess at the exact code you are using.

BTW, if you are not wedded to the Book Flip effect, the Swiss Army script is very good for what you are doing.

Whatever you use, with so many images, they must be optimized.

[jscheuer1]

I've been playing around with the extended version of the script. It also suffers from the same general problems as the original. I fixed that up and added preloading checks to it. What it does is wait until enough images are loaded before showing anything, and will wait until all images needed to make the next turn are loaded before making it.

Demo:

http://home.comcast.net/~jscheuer1/s...flip_ext_m.htm

[Markxxx]

Here's the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>FC Parody</title>
<script type="text/javascript" src="book.js">
</script>
<link rel="stylesheet" href="/css/hs.css" type="text/css" />
<style type="text/css">
.just{text-align: left;}
</style>
</head>
<body onload="ImageBook()">
<div id="ads">
<script type="text/javascript"><!--
google_ad_client = "pub-0391154171492909";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "000000";
google_color_bg = "ffc58a";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="main">
<h1>
Parody
</h1>
<hr />
<span class="just">
Note: Image viewer will not function properly till all images are fully loaded. This may take awhile with dial up. Please be patient. If you notice the images repeating they have not all loaded yet. Please wait till all images have loaded then try again.
<br /><br />
</span>
<div id="Book" style="position:relative">
<img src="http://cell.gif" width="500" height="287" alt="image place holder"/>
</div>
<form>
<input type="button" value="&#62;&#62;" onclick="Book_GoBackWard()"/>
<input type="button" value="&#60;&#60;" onclick="Book_GoForWard()"/><br />
</form>
<hr />
Click Here to return to <a href="index.html">Home Page</a>
<br /><br />
<div id="footer">
This site is for fun and parody only.</div>
</div>

</body>
</html>


The Javascript is cut and pasted from

http://www.burmees.nl/menu/bookextended.html

It works VERY well. As I said I was just thinking it was the large number of images that were screwing it up. I have NO issues with the script at around 100 images to 200 images.

I may try your other scripts. Would those work well with 700-1000 images?

If not do you have any suggestions for a viewer for a huge number of images or is this simply a bad idea and I should split them up into say "image viewer one" "Imageviewer two" etc with 100 images per viewer per page

Thanks for your help

[jscheuer1]

You would have to try them out to see. I'd recommend the last one I offered first.

[Markxxx]

Thanks as always I'll give your last script a try and see how it goes with the large number


thanks again