jQ crossfade slideshow plugin to adjust size of container for different aspect images

Hi!

Hi all,

I’m banging my head against a brick wall looking for this but I know I’ve seen it before…

I would like a slideshow of images which are of different aspect ratios and sizes. I want them to cycle from one to five and fade in and out. However, I would like the container to smoothly change to it’s new shape before loading each image.

It would be just like the jQ lightbox plugin (for example here: http://bit.ly/1raCVHf - click any image and cycle through manually) but automated and not on top of text but inline. Therefore any text underneath would move (smoothly) up and down with the changing of the image size. Also it wouldn’t want the “Close” button (obviously because it’s inline with the text) or the caption.

Does this make any sense?!

All help greatly appreciated!

in principle

<!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[*/
#ss {
  position:relative;width:240px;height:300px;border:solid red 1px;text-Align:center;
}

#ss IMG{
  position:absolute;left:0px;top:0px;
}

#next {
  position:absolute;z-Index:4;left:5px;top:50px;width:40px;height:20px;background-Color:#FFFFCC;
}

#back {
  position:absolute;z-Index:4;right:5px;top:50px;width:40px;height:20px;background-Color:#FFFFCC;
}

/*]]>*/
</style></head>

<body>
<div id="ss" >
 <div id="next" ></div>
 <div id="back" ></div>
 <br /><br /><br /><br />

 loading
</div>
<input type="button" name="" value="GoTo 0" onclick="zxcSlideShow.GoTo('ss',0);" />
<input type="button" name="" value="GoTo 1" onclick="zxcSlideShow.GoTo('ss',1);" />
<input type="button" name="" value="GoTo 2" onclick="zxcSlideShow.GoTo('ss',2);" />


<script type="text/javascript">
/*<![CDATA[*/

var zxcSlideShow={

 GoTo:function(id,n){
  var o=this['zxc'+id];
  if (o){
   this.Pause(o.id);
   o.ia[n]&&n!=o.n?this.rotate(o,n):null;
  }
 },

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  o?this.rotate(o,o.n+ud):null;
 },

 Auto:function(id,ms){
  var o=this['zxc'+id];
  o?o.to=setTimeout(function(){ zxcSlideShow.rotate(o,true); },ms||200):null;
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 init:function(o){
  var id=o.ParentID,ia=o.ImageArray,ms=o.Animate,h=o.AutoStart,add=o.AddEvents,s=o.AutoStart,p=document.getElementById(id);
  if (p&&ia instanceof Array){
   var a=document.createElement('A'),i=document.createElement('IMG'),z0=0,z1=0;
   i.style.position='absolute';
   i.style.left=i.style.borderWidth='0px';
   i.style.top='-3000px';
   for (;z0<ia.length;z0++){
    ia[z0][3]=new Image();
   }
   i.src=ia[0][0];
   p.appendChild(a);
   a.appendChild(i);
   o.id=id;
   o.p=p;
   o.a=a;
   o.i=i;
   o.ia=ia;
   o.l=z0-1;
   o.lk=a;
   o.n=0;
   o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
   o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
   o.a=[[p,'width'],[p,'height'],[i,'']];
   if (add instanceof Array){
    for (;z1<add.length;z1++){
     if (add[z1]){
      p=document.getElementById(add[z1][0]);
      h=add[z1][1];
      if (p&&this[add[z1][2]]){
       this.addevt(p,h=='mouseover'||h=='mouseout'||h=='mouseup'||h=='mousedown'?h:'click',add[z1][2],id,add[z1][3]);
      }
     }
    }
   }
   this.rotate(o,0,10);
   this['zxc'+id]=o;
   typeof(s)=='number'&&s>20?this.Auto(id,s):null;
  }
 },

 rotate:function(o,n,ms){
  this.Pause(o.id);
  o.i.style.top='-3000px';
  o.auto=n===true;
  n=o.auto?o.n+1:n;
  n=n<0?o.l:n>o.l?0:n;
  clearTimeout(o.to);
  o.ia[n][3].src=o.ia[n][0];
  if (o.ia[n][3].width<40){
   return o.to=setTimeout(function(){ zxcSlideShow.rotate(o,n); },100);
  }
  this.animate(o,o.a[0],o.p.offsetWidth,o.ia[n][3].width,new Date(),ms||o.ms);
  this.animate(o,o.a[1],o.p.offsetHeight,o.ia[n][3].height,new Date(),ms||o.ms,n);
  o.n=n;
  typeof(o.OnChange)=='function'?o.OnChange(n):null;
 },

 animate:function(o,a,f,t,srt,mS,x){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   n=Math.max(0,n);
   a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
  }
  else {
   a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],n);
   a[1]?o.i.style[a[1]]=t+'px':null;
   if (o.ia[x]){
    o.i.src=o.ia[x][3].src;
    o.i.style.top='0px';
    this.animate(o,o.a[2],0,100,new Date(),mS,true);
   }
   o.auto&&x===true?oop.Auto(o.id,o.h):null;
  }
},

 opc:function(o,n){
 o.style.filter='alpha(opacity='+n+')';
 o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 },


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


}

zxcSlideShow.init({
 ParentID:'ss',
 ImageArray:[
  ['http://www.glorydaysvintage.co.uk/images/album/summer/summer_01.jpg'],
  ['http://www.glorydaysvintage.co.uk/images/album/summer/summer_03.jpg'],
  ['http://www.glorydaysvintage.co.uk/images/album/summer/summer_08.jpg']
 ],
 AddEvents:[
  ['next','click','Next',1],
  ['back','click','Next',-1],
  ['ss','mouseover','Pause'],
  ['ss','mouseout','Auto'],
 ],
 Animate:1000,
 AutoHold:2000,
 AutoStart:2000,
 OnChange:function(n){

 }
});


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

</html>