Combining vertical and backward features of Book Flip Slideshow

**melissas** · 06-09-2011, 08:06 PM

1) Script Title: Book Flip Slideshow

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

3) Describe problem:

I want to add the var Book_BackWard function available in the extended book flip slideshow script found here: http://www.burmees.nl/menu/bookextended.html to the book flip slideshow and use it in conjunction with the vertical flip function to make the slideshow flip upwards.

I also want to remove or hide the top image so it displays as just one image flipping up, to achieve the effect of the image disappearing instead of opening like a book.

I can't figure out how to add the backward function to the script with the vertical function, or vice versa adding the vertical function to the extended script. I have been playing with it for hours and can't seem to find the right parts of the scripts to combine.

Any idea how to combine the vertical and backward function and hide or remove the top image?

TIA!

**vwphillips** · 06-10-2011, 01:56 PM

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[*/

#tst {
  position:absolute;left:50px;top:60px;width:400px;height:150px;border:solid red 1px;
}

#tstV {
  position:absolute;left:500px;top:60px;width:200px;height:300px;border:solid red 1px;
}

.tstV2P {
  position:absolute;overflow:hidden;left:800px;top:60px;width:200px;height:150px;border:solid red 1px;
}
#tstV2 {
  position:absolute;left:0px;top:0px;width:200px;height:300px;
}

/*]]>*/
</style>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// removed to allow posting

// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.neg=srt<0||fin<0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime;
  this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
  this.apply();
  if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.data[0]<0&&!this.neg) this.data[0]=0;
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>



</head>

<body>
<input type="button" name="" value="Forward" onmouseup="B1.Forward();" />
<input type="button" name="" value="Back" onmouseup="B1.Back();" />
<input type="button" name="" value="Pause" onmouseup="B1.Pause();" />
<input type="button" name="" value="Auto" onmouseup="B1.Auto();" />
<input type="button" name="" value="Auto Forward" onmouseup="B1.Auto(1);" />
<input type="button" name="" value="Auto Back" onmouseup="B1.Auto(-1);" />
 <div id="tst" >
  <a href="#"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" /></a>
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Egypt" />
 </div>

 <div id="tstV" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Egypt" />
 </div>


 <div class="tstV2P" >
 <div id="tstV2" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Egypt" />
 </div>
 </div>
<script type="text/javascript">
/*<![CDATA[*/
// Image Book (10-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk

function zxcImageBook(o){
 var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','left','height','width','offsetHeight','offsetWidth']:['left','top','width','height','offsetWidth','offsetHeight'],obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),w=obj[mde[4]]/2,h=obj[mde[5]],imgary=[],link=document.createElement('A'),lks=[],hrefs=[],a,z0=0,ms=o.AnimationSpeed,ms=isFinite(ms)?ms/2:500,hold=o.AutoHold,img,ary=[],z1=0,lft,right;
 obj.style.overflow='hidden';
 for (;z0<imgs.length;z0++){
  imgs[z0].style.visibility='hidden';
  imgary[z0]=imgs[z0].src;
  hrefs[z0]=imgs[z0].parentNode.href;
 }
 for (;z1<2;z1++){
  lks[z1]=z1==0?link:link.cloneNode(false);
  lks[z1].style.zIndex='1';
  if (hrefs[z1]){
   lks[z1].href=hrefs[z1];
  }
  ary[z1]=imgs[z1].cloneNode(true);
  ary[z1].style.position='absolute';
  ary[z1].style.visibility='visible';
  ary[z1].style[mde[0]]=(z1>0?w:0)+'px';
  ary[z1].style[mde[1]]='0px';
  ary[z1].style[mde[2]]=w+'px';
  ary[z1].style[mde[3]]=h+'px';
  lks[z1].appendChild(ary[z1]);
  obj.appendChild(lks[z1]);
 }
 this.ary=ary;
 this.lks=lks;
 this.hrefs=hrefs;
 this.imgary=imgary;
 this.w=w;
 this.ms=ms;
 this.hold=(isFinite(hold)?hold:this.ms*2)+this.ms*2;
 this.to=null;
 this.ud=1;
 this.cntL=1;
 this.cntR=0;
 left=ary[0].cloneNode(true);
 left.style.zIndex='2';
 left.style[mde[2]]='0px';
 obj.appendChild(left);
 this.leftW=new zxcAnimate(mde[2],left);
 this.leftL=new zxcAnimate(mde[0],left);
 this.leftL.Complete=function(){
  if (oop.ud==1){
   ary[0].src=this.obj.src;
   this.obj.style[mde[2]]='0px';
   oop.links(0,oop.cntR);
  }
  else {
   oop.rightL.obj.src=this.obj.src;
   oop.rightW.animate(0,w,ms);
  }
 }
 right=ary[1].cloneNode(true);
 right.style.zIndex='2';
 right.style[mde[2]]='0px';
 obj.appendChild(right);
 this.rightW=new zxcAnimate(mde[2],right);
 this.rightL=new zxcAnimate(mde[1],right);
 this.rightW.Complete=function(){
  if (oop.ud==1){
   oop.leftL.obj.src=this.obj.src;
   oop.leftW.animate(0,w,ms);
   oop.leftL.animate(w,0,ms);
  }
  else {
   ary[1].src=this.obj.src;
   this.obj.style[mde[2]]='0px';
   oop.links(1,oop.cntL);
  }
 }
 if (o.AutoStart==true){
  this.to=setTimeout(function(){ oop.Auto(); },this.hold);
 }
}

zxcImageBook.prototype={

 Forward:function(){
  this.Pause();
  var imgary=this.imgary;
  this.ud=1;
  this.rightW.obj.src=imgary[this.cntL];
  this.rightW.animate(this.w,0,this.ms);
  this.cntL=this.count(this.cntL);
  this.cntR=this.count(this.cntR);
  this.ary[1].src=imgary[this.cntL];
  this.links(1,this.cntL);
 },

 Back:function(){
  this.Pause();
  var imgary=this.imgary,w=this.width,ms=this.ms;
  this.ud=-1;
  var w=this.w,ms=this.ms;
  this.leftL.obj.src=imgary[this.cntR];
  this.leftW.animate(w,0,ms);
  this.leftL.animate(0,w,ms);
  this.cntL=this.count(this.cntL);
  this.cntR=this.count(this.cntR);
  this.ary[0].src=imgary[this.cntR];
  this.links(0,this.cntR);
 },


 Auto:function(ud){
  this.Pause();
  ud=isFinite(ud)?ud<0?-1:1:this.ud;
  this[ud>0?'Forward':'Back']();
  var oop=this;
  this.to=setTimeout(function(){ oop.Auto(); },this.hold);
 },

 Pause:function(cnt){
  clearTimeout(this.to);
 },

 count:function(cnt){
  var lgth=this.imgary.length-1;
  cnt+=this.ud;
  cnt=cnt>lgth?0:cnt<0?lgth:cnt;
  return cnt;
 },

 links:function(nu,cnt){
  var href=this.hrefs[cnt];
  this.lks[0].removeAttribute('href');
  this.lks[1].removeAttribute('href');
  if (href){
   this.lks[nu].href=href;
  }
 }


}

var B1=new zxcImageBook({
 ID:'tst',            // the unique ID name of the parent node.                       (string)
 Mode:'Horizontal',   //(optional) the mode of execution, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
 AnimationSpeed:1000, //(optional) the animation duration in milliseconds'.           (number, default = 1000)
 AutoHold:1000,       //(optional) the auto rotate 'hold' duration in milliseconds'.  (number, default = AnimationSpeed)
 AutoStart:true       //(optional) true = auto rotate on ititialization.              (boolean, default = false = no auto start)
});

var B2=new zxcImageBook({
 ID:'tstV',
 Mode:'Vertical',
 AutoStart:true
});

var B3=new zxcImageBook({
 ID:'tstV2',
 Mode:'Vertical',
 AutoStart:true
});

/*]]>*/
</script>
</body>

</html>

**melissas** · 06-11-2011, 01:55 PM

Thanks vwphillips the third layout in that script is close, how can I flip it so the images open upwards?

**vwphillips** · 06-12-2011, 08:31 AM

the image opens upwards from the bottom.

I thought that is what you wanted.

Thread: Combining vertical and backward features of Book Flip Slideshow

Thread Tools

Search Thread

Combining vertical and backward features of Book Flip Slideshow

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

Bookmarks

Bookmarks

Posting Permissions