Results 1 to 10 of 10

Thread: Book Flip Pre Load

  1. #1
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Book Flip Pre Load

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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


    thanks again

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •