Advanced Search

Results 1 to 4 of 4

Thread: Expando that will expand out of DIV

  1. #1
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Expando that will expand out of DIV

    I'm using Gridiculous for layout, which automatically shrinks images down to fit the grid.

    I want the Expando image effect, but as written that can't restore an image beyond the confines of its surrounding <div>.

    Looking for a script and/or layout method that will allow images to shrink to fit browser size but will grow them to 100% size on mouse-over.

    Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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>
    
    </head>
    
    <body>
    <center>
    <br /><br /><br /><br /><br /><br />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" class="expand Magnify:2 Animate:500 SRC:http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" class="expand Magnify:1.5 " />
    </center>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Expand (30-August-2013) DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    // SRC default     = the image src
    // Animate default = 1000
    // zIndex default  = 101
    
    function zxcImageExpand(cls){
     var imgs=document.body.getElementsByTagName('IMG'),c,o,i,z0=0,z0a;
     for (;z0<imgs.length;z0++){
      c=imgs[z0].className;
      if ((' '+c+' ').match(' '+cls+' ')){
       o={img:imgs[z0]};
       c=c.split(' ');
       for (z0a=0;z0a<c.length;z0a++){
        i=c[z0a].indexOf(':');
        if (i>2){
         o[c[z0a].slice(o,i).toLowerCase()]=c[z0a].slice(i+1);
        }
       }
       new zxcImageExpandOOP(o);
      }
     }
    }
    
    function zxcImageExpandOOP(o){
     var c=document.createElement('IMG'),ms=o.Animate,m=o.magnify,z=o.zindex;
     c.style.position='absolute';
     c.style.zIndex=isFinite(z*1)?Math.max(z*1,2):'101';
     c.style.left=c.style.top='101px';
     c.src=o.src||o.img.src;
     o.c=c;
     o.ms=isFinite(ms*1)?Math.max(ms*1,20):1000;
     o.m=isFinite(m*1)?Math.max(m*1,1.1):2;
     o.a=[['left'],['top'],['width'],['height'],[false]];
     o.ud=false;
     this.addevt(o.img,'mouseover','expand',o,true);
     this.addevt(o.c,'mouseout','expand',o,false);
    }
    
    zxcImageExpandOOP.prototype={
    
     expand:function(o,ud){
      o.ud=ud;
      zxcImageExpand.o&&zxcImageExpand.o!=o&&zxcImageExpand.o.ud?this.expand(zxcImageExpand.o,false):null;
      var p=this.pos(o.img),iw=o.img.width,ih=o.img.height,cw=iw*o.m,ch=ih*o.m;
      document.body.appendChild(o.c);
      this.animate(o,o.a[0],ud?p[0]:o.a[0][1],p[0]-(ud?(cw-iw)/2:0),new Date(),o.ms);
      this.animate(o,o.a[1],ud?p[1]:o.a[1][1],p[1]-(ud?(ch-ih)/2:0),new Date(),o.ms,!ud);
      this.animate(o,o.a[2],ud?iw:o.a[2][1],(ud?cw:iw),new Date(),o.ms);
      this.animate(o,o.a[3],ud?ih:o.a[3][1],(ud?ch:ih),new Date(),o.ms);
      this.animate(o,o.a[4],ud?0:o.a[4][1],(ud?100:0),new Date(),o.ms);
      zxcImageExpand.o=o;
     },
    
     animate:function(o,a,f,t,srt,mS,ud){
      clearTimeout(a[2]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]=Math.max(f<0||t<0?n:0,n);
       a[0]?o.c.style[a[0]]=a[1]+'px':oop.opc(o.c,a[1]);
      }
      if (ms<mS){
       a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
      }
      else {
       a[1]=t;
       a[0]?o.c.style[a[0]]=(ud?-3000:t)+'px':oop.opc(o.c,t);
      }
     },
    
     opc:function(o,t){
      o.style.filter='alpha(opacity='+t+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=t/100-.001;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
    
     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;
     }
    
    }
    
    zxcImageExpand('expand');
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Aug 2013
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Vic: That's pretty cool! I put it in this JSFiddle.

    I'm trying to figure out how it works but can't. If you have time I'd appreciate any code comments you could add.

Similar Threads

  1. expando
    By tamati in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-03-2011, 02:44 PM
  2. expando - expand right images to left
    By emily.pearce in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-11-2010, 02:07 AM
  3. Expando Help
    By rsusano in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-30-2009, 06:23 AM
  4. expando
    By goofyguy in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-29-2009, 10:32 AM
  5. expando problem
    By tx328is in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 03-28-2009, 09:05 PM

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
  •