Bookflip Thank You and Request

1) script name: Book Flip Slideshow
2) describe problem: none -it's just wonderful!

First I want to thank jscheur1 so much for the time put into answering questions and for all the great scripts here. I am no coder and have very little knowledge in regards to JavaScript, but with the original script and reading questions you have already answered, I have very close to exactly what I want. (Please also thank the author for me, if you can. I tried to email him a thank you, but it came back.)

I am just thrilled and am truly grateful to you.

I have one more wish, if possible, I would love to be able to add image controls for the viewer to go to page 1, 2, 3, etc. (each "slide", or page) An example of this function is here http://michiganflowerfarm.com/flowers/

The current slide show I'm working on is here:
http://michiganflowerfarm.com/images...ok_summer.html.

Again, thank you.

Like:

http://home.comcast.net/~jscheuer1/s...p/michflwr.htm

?

If so, use your browser's "View Source" to get the added code, markup and styles.

Any questions, just let me know.

or

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> /*<![CDATA[*/ #book { position:relative;width:220px;height:220px; } .pageRight { width:220px;height:220px;background-Color:#FFFFCC;border:solid red 1px; } .pageLeft { width:220px;height:220px;background-Color:#FFCC66;border:solid red 1px; } #paginate { position:relative;left:150px;width:150px;height:30px;background-Color:#FFCC66;margin-Top:5px;margin-Bottom:5px; } #paginate .page { position:relative;width:20px;height:20px;background-Color:#FFFFCC;margin:5px;float:left;cursor:pointer } #paginate .current { background-Color:red; } /*]]>*/ </style> </head> <body> <div id="book" > </div> <div id="paginate" > </div> <input type="button" name="" value="Next" onmouseup="zxcPhotoBookIV.Next('book',1);" /> <input id="b2" type="button" name="" value="Back" /> <input type="button" name="" value="GoTo 0" onmouseup="zxcPhotoBookIV.GoTo('book',0);" /> <input id="b4" type="button" name="" value="GoTo 1" /> <input type="button" name="" value="GoTo 2" onmouseup="zxcPhotoBookIV.GoTo('book',2);" /> <input type="button" name="" value="GoTo 3" onmouseup="zxcPhotoBookIV.GoTo('book',3);" /> <input type="button" name="" value="GoTo 4" onmouseup="zxcPhotoBookIV.GoTo('book',4);" /> <input type="button" name="" value="Pause" onmouseup="zxcPhotoBookIV.Pause('book');" /> <input type="button" name="" value="Auto" onmouseup="zxcPhotoBookIV.Auto('book');" /> <script type="text/javascript"> /*<![CDATA[*/ // Photo Book IV (12-January-2014) // by Vic Phillips - http://www.vicsjavascripts.org/ var zxcPhotoBookIV={ GoTo:function(id,n){ var o=this['zxc'+id]; if (o){ this.Pause(id); if (o.pgs[n]&&n!=o.n){ o.ud=n>o.n; o.goto=n; this.rotate(o); } } }, Next:function(id,ud){ var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1; if (o){ o.ud=ud>0; this.rotate(o,o.n+ud); } }, Pause:function(id){ var o=this['zxc'+id]; if (o){ clearTimeout(o.to); o.auto=false; } }, Auto:function(id,ms){ var oop=this,o=oop['zxc'+id]; if (o){ o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200); } }, init:function(o){ var id=o.BookID,rpc=o.PageRight,a=o.PageArray,ms=o.Animate,h=o.AutoHold,b=document.getElementById(id),ary=[],z0=0; if (b&&a instanceof Array&&typeof(rpc)=='string'){ for (;z0<a.length;z0++){ ary[z0]=new Image(); ary[z0].src=a[z0][0]; } o.id=id; o.ms=typeof(ms)=='number'&&ms>20?ms:1000; o.h=typeof(h)=='number'&&h>20?h:o.ms*4; o.i=Math.PI/(2*o.ms); o.b=b; o.a=a; o.rpc=rpc; this.load(o,ary); } }, load:function(o,a){ for (var oop=this,z0=0;z0<a.length;z0++){ if (a[z0].width<40){ o.to=setTimeout(function(){ oop.load(o,a); },200); return; } } this.ready(o); }, ready:function(o){ var lpc=o.PageLeft,add=o.AddEvents,s=o.AutoStart,p=document.getElementById(o.PaginateID),rp=document.createElement('DIV'),i=document.createElement('IMG'),w,h,lp,lpc=typeof(lpc)=='string'?lpc:o.rpc,pg,z0=0,z1=0; o.ud=true; o.n=0; o.goto=-1; rp.className=o.rpc; o.b.appendChild(rp); i.style.position=rp.style.position='absolute'; rp.style.overflow='hidden'; w=rp.offsetWidth; h=rp.offsetHeight; rp.style.left=w+'px'; rp.style.top='0px'; lp=rp.cloneNode(false); lp.style.visibility='hidden'; o.rp=[]; o.lp=[]; o.pgs=[]; for (var z0=0;z0<o.a.length;z0+=2){ rp=z0>0?rp.cloneNode(false):rp; rp.style.zIndex=6-z0; i=i.cloneNode(false); i.src=o.a[z0][0]; rp.appendChild(i); o.b.appendChild(rp); i.style.left=(w-i.width)/2+'px'; i.style.top=(h-i.height)/2+'px'; i.style.height=i.height+'px'; o.rp.push([[rp,'width',w,0],[i,'width',i.width,0],[i,'left',(w-i.width)/2,0]]); lp=lp.cloneNode(false); lp.className=lpc; lp.style.width='0px'; lp.style.zIndex=z0; i=i.cloneNode(false); o.a[z0+1]?i.src=o.a[z0+1][0]:null; i.style.display=o.a[z0+1]?'inline':'none'; lp.appendChild(i); o.b.appendChild(lp); i.style.left=(w-i.width)/2+'px'; i.style.height=i.height+'px'; i.style.top=(h-i.height)/2+'px'; o.lp.push([[lp,'width',w,0],[lp,'left',0,w],[i,'width',i.width,0],[i,'left',(w-i.width)/2,0]]); this.pge(o,p); } this.pge(o,p); o.lgth=o.lp.length-1; if (add instanceof Array){ for (;z1<add.length;z1++){ if (add[z1]){ pg=document.getElementById(add[z1][0]); if (pg&&this[add[z1][2]]){ w=add[z1][1]; this.addevt(pg,w=='click'||w=='mouseover'||w=='mouseout'||w=='mousedown'?w:'mouseup',add[z1][2],o.id,add[z1][3]); } } } } o.r=true; this['zxc'+o.id]=o; typeof(s)=='number'&&s>0?this.Auto(o.id,s):null; }, pge:function(o,p){ pg=document.createElement('DIV'); pg.className='page'+(o.pgs.length!=0?'':' current'); p?p.appendChild(pg):null; this.addevt(pg,'mouseup','GoTo',o.id,o.pgs.length); o.pgs.push(pg); }, rotate:function(o,a){ this.Pause(o.id); o.auto=a===true; o.auto||o.lp[n]?o.goto=-1:null; var n,gt=o.pgs[o.goto],ms=o.ms/(gt?2:1),z0=0; n=gt||o.auto?o.n+(o.ud?1:-1):a; // n=Math.min(Math.max(n,o.ud?1:0),o.lgth+(o.ud?1:0)); a=o.ud?o.rp[n-1]:o.lp[n]; if (o.ReverseAuto!==false&&o.auto&&!a){ o.ud=!o.ud; this.Auto(o.id,o.h*2); } if (o.r&&a&&n!=o.n){ o.r=false; o.pgs[o.n].className='page'; o.n=n; a[0][0].style.visibility='visible'; for (var z0=0;z0<a.length;z0++){ this.animate(o,a[z0],a[z0][2],a[z0][3],new Date(),o.ms,'s',z0==0); } } }, animate:function(o,a,f,t,srt,mS,s,h){ clearTimeout(a[6]); var oop=this,ms=new Date()-srt,n=s=='s'?(t-f)*Math.sin(o.i*ms)+f:s=='c'?t-(t-f)*Math.cos(o.i*ms):(t-f)/mS*ms+f,z0=0; if (isFinite(n)){ a[4]=Math.max(f<0||t<0?n:0,n); a[0].style[a[1]]=a[4]+'px'; } if (ms<mS){ a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,s,h); },10); } else { a[6]=t; a[0].style[a[1]]=t+'px'; if (h===true){ o.pgs[o.n].className='page current'; t==0?a[0].style.visibility='hidden':null; a=o.ud?o.lp[o.n-1]:o.rp[o.n]; a[0][0].style.visibility='visible'; for (;z0<a.length;z0++){ this.animate(o,a[z0],a[z0][3],a[z0][2],new Date(),o.ms,'c',z0==0?'A':''); } } if (h=='A'){ o.r=true; o.auto?oop.Auto(o.id,o.h):null; o.pgs[o.goto]&&o.n!=o.goto?oop.rotate(o):null; } } }, addevt:function(o,t,f,p,p1){ var oop=this; o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null; } } zxcPhotoBookIV.init({ BookID:'book', // the unique ID name of the parent DIV. (string) PageRight:'pageRight', // the class name of the right hand page. (string) PageArray:[ // an array defining the image SRCs (string) // field 0 = the image SRC. ['http://www.vicsjavascripts.org/StdImages/0.gif'], ['http://www.vicsjavascripts.org/StdImages/1.gif'], ['http://www.vicsjavascripts.org/StdImages/2.gif'], ['http://www.vicsjavascripts.org/StdImages/3.gif'], ['http://www.vicsjavascripts.org/StdImages/4.gif'], ['http://www.vicsjavascripts.org/StdImages/5.gif'], ['http://www.vicsjavascripts.org/StdImages/6.gif'] ], PageLeft:'pageLeft', //(optional) the class name of the left hand page. (string, default = PageRight) Animate:1000, //(optional) the page turn duration in millisec. (number, default = 1000) AutoHold:2000, //(optional) the auto rotate 'hold' delay in millisec. (number, default = Animate*4) AutoStart:1000, //(optional) the auto rotate 'start' delay in millisec. (number, default = no auto start) ReverseAuto:true, //(optional) false = the auto rotate will not reverse. (number, default = the auto rotate will reverse) PaginateID:'paginate', //(optional) the unique ID name of the paginate parent DIV. (string, default = no pagination) AddEvents:[ //(optional) an array defining the control events to add. (array, default = in line event calls) // field 0 = the unique ID name of the element. // field 1 = the event type. // field 2 = the function name. // field 3 = the control parameter to pass to the function. ['b2','mouseup','Next',-1], ['b4','mouseup','GoTo',1], ['book','mouseover','Pause'], ['book','mouseout','Auto'] ] }); /*]]>*/ </script> </body> </html>

I think I got so excited I deleted my initial reply. (0: I am speechless! This is amazingly kind and generous of you. I thank you from the bottom of my heart and will make a donation in your honor as soon as possible. It is exactly what I was hoping for.

I will study this and if you don't mind, I will probably have questions. You are just amazing.

Subscribed! I like it as well!

Thanks. And you're welcome. I updated it a little over last night to fix a bug - under some circumstances (using the page buttons when the script was in auto mode) sometimes the wrong images would come up. I also added highlighting of the current page button.

More Thanks

More thanks! It is wonderful. I am still in awe. I got it up on a test page and will hopefully get it into the rest of the "books" soon.
http://michiganflowerfarm.com/images...lbum/test.html

I think the viewers are going to love being able to sort through the photos this way. You are really wonderful to do this.

Renee`

That's nice! You missed one of the changes. I changed the BookImages function so that the active pages' button would be highlighted even when the user was using the arrows or auto mode to turn the pages.

Oh, I am blind and embarrassed. That was a very good lesson learned, I was going a little crazy.

Now I think it's absolutely perfect!

http://michiganflowerfarm.com/images...k_animals.html

Hopefully I'll get it on the other books this week.

Thank you, again and again and again.

Renee`

I like it as well...if I had one critique it would be that I think the pages turn just a little to slow, just my opinion though.

Quote:

Originally Posted by kennyd4110

I like it as well...if I had one critique it would be that I think the pages turn just a little to slow, just my opinion though.

Good point. I sped them up a little. Thank you for taking the time to comment. This is such a great forum.

Quote:

Originally Posted by MFF

Good point. I sped them up a little. Thank you for taking the time to comment. This is such a great forum.

Much better http://smileys.on-my-web.com/reposit.../happy-047.gif

This IS a great forum!. I have two of their products running on my webpage now at www.boltonhooks.com , and may incorporate this in the future.

It completely amazes me how much patience these people have, with all their knowledge and genius, for those of us, like me, who most times don't even know how to ask the right question (and miss code ). And how willing they are to give their time. It's very humbling. I just don't know how to say thank you enough; to ask we contribute to their charity of choice is another selfless beautiful act.

This type of slideshow has been a dream of mine for awhile. Thanks to John, Vic, and the original author, it's reality! I think you will love it and find it very easy to work with if you decide to put it on your site.