SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot maffp's Avatar
    Join Date
    Jun 2005
    Location
    UK
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in principle

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


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
  •