Results 1 to 4 of 4

Thread: Expand Portfolio List

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    458
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default Expand Portfolio List

    Looking for script like this:
    http://www.logicspot.com/portfolio/

    It's a column image with description, but when we click either on the image or text it will expand and show more specific information.
    Last edited by davelf; 04-03-2013 at 03:02 AM.
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    bit late but

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .parent {
      position:absolute;left:200px;top:200px;width:600px;height:600px;border:solid red 1px;
    }
    
    .thumb {
      position:absolute;left:400px;top:10px;width:180px;height:140px;background-Color:#FFCC66;
    }
    
    .thumb IMG {
      position:absolute;left:10px;top:10px;width:160px;height:120px;
    }
    
    .full {
      position:absolute;width:380px;height:290px;background-Color:#FFCC66;
    }
    
    .full IMG {
      position:absolute;left:25px;top:20px;width:330px;height:248px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="tst" class="parent" >
     <div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></div>
     <div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" /></div>
     <div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" /></div>
     <div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" /></div>
     <div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" /></div>
     <div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" /></div>
     <div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="img" /></div>
     <div class="thumb" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="img" /></div>
    
     <div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></div>
     <div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" /></div>
     <div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" /></div>
     <div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" /></div>
     <div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" /></div>
     <div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" /></div>
     <div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="img" /></div>
     <div class="full" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="img" /></div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Expand Gallery (29-March-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    function zxcExpandGallery(o){
      var id=o.GalleryID,obj=document.getElementById(id),tg=o.Toggle,ms=o.Animate,nu=o.Expand,days=o.Persistence,exp=o.OnExpand,thumbs=obj?this.bycls(o.ThumbClass,obj):[],full=obj?this.bycls(o.ExpandClass,obj):[];
      if (obj&&thumbs[1]&&full[1]){
       var ow=obj.offsetWidth,tw=thumbs[0].offsetWidth,th=thumbs[0].offsetHeight,fw=full[0].offsetWidth,fh=full[0].offsetHeight,cols=Math.floor(ow/tw),w=Math.floor(ow/cols),p=Math.floor((ow/cols-tw)/2),h=th+p,days=(typeof(days)=='number'&&days>0)||days=='session'?days:-1,ck=this.cookie(id),t,f,r,c,x,y,tary=[],fary=[],rcary=[],z0=0,z1=0;
       for (;z0<thumbs.length;z0++){
        t=thumbs[z0];
        t.style.width=tw+'px';
        t.style.height=th+'px';
        tary[z0]=[t,z0];
        f=full[z0]?full[z0]:t.cloneNode(false)
        f.style.top='0px';
        f.style.width=fw+'px';
        f.style.height=fh+'px';
        f.style.clip='rect(0px,'+fw+'px,0px,0px)';
        fary[z0]=[f,'',0];
       }
       for (;z1<tary.length+Math.ceil(fw/tw)*Math.ceil(fh/th);z1++){
        r=Math.floor(z1/cols),c=z1%cols;
        x=c*w+p,y=r*h+p;
        rcary[z1]=[r,c,x,y];
        if (tary[z1]){
         tary[z1][0].style.left=x+'px';
         tary[z1][0].style.top=y+'px';
         tary[z1][2]=rcary[z1];
         tary[z1][3]=[tary[z1][0],'left',x];
         tary[z1][4]=[tary[z1][0],'top',y];
         this.addevt(tary[z1][0],'mouseup','open',z1);
         tg!==false?this.addevt(fary[z1][0],'mouseup','close',null):null;
        }
       }
       o=this;
       o.id=id;
       o.obj=obj;
       o.tary=tary;
       o.fary=fary;
       o.rcary=rcary;
       o.oary=[obj,'height',tary[tary.length-1][4][2]+th+p];
       o.cs=Math.ceil(fw/w)-1;
       o.rs=Math.ceil(fh/h)-1;
       o.mc=Math.ceil(fw/w)-o.cs;
       o.cols=cols;
       o.fh=fh;
       o.fw=fw;
       o.th=th;
       o.fh=fh;
       o.p=p;
       o.f=fary[0];
       o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
       o.days=days;
       o.exp=typeof(exp)=='function'?exp:false;
       o.obj.style.height=o.oary[2]+'px';
       nu=days!=-1&&ck&&thumbs[ck]?ck*1:nu;
       o.exp?o.exp(nu):null;
       tary[nu]?this.open(nu):null;
      }
     }
    
    zxcExpandGallery.prototype={
    
     open:function(nu){
      var o=this;
      if (o.tary&&o.tary[nu]){
       var rca=o.rcary,a=o.tary[nu],f=o.fary[nu],r=a[2][0],c=a[2][1],c=Math.min(c,o.mc),tary=o.tary.concat(),rc=rca[r*o.cols+c],d=new Date(),z0=0,z1=0;
       f[0].style.zIndex='2';
       f[0].style.left=rc[2]+'px';
       f[0].style.top=rc[3]+'px';
       o.animate(o,f,f[2],o.fh,d,o.ms);
       a[0].style.zIndex='0';
       o.animate(o,a[3],a[3][2],rc[2],d,o.ms);
       o.animate(o,a[4],a[4][2],rc[3],d,o.ms);
       tary.splice(o.tary[nu][1],1);
       rc=[];
       for (;z0<rca.length;z0++){
        if ((rca[z0][0]<r||rca[z0][0]>r+o.rs)||(rca[z0][1]<c||rca[z0][1]>c+o.cs)){
          rc.push(rca[z0]);
        }
       }
       o.close(nu,tary,rc);
      }
     },
    
     close:function(nu,tary,rc){
      var o=this,d=new Date(),f,z0=0;
      if (o.tary){
       if (o.f){
        this.animate(o,o.f,o.f[2],0,d,o.ms,true);
        o.f[0].style.zIndex='1';
       }
       f=o.fary[nu];
       tary=f&&tary?tary:o.tary;
       rc=f&&rc?rc:o.rcary;
       for (;z0<tary.length;z0++){
        a=o.tary[tary[z0][1]];
        a[0].style.zIndex='3';
        this.animate(o,a[3],a[3][2],rc[z0][2],d,o.ms);
        this.animate(o,a[4],a[4][2],rc[z0][3],d,o.ms);
       }
       o.animate(o,o.oary,o.oary[2],Math.max(rc[z0][3]+o.th,f?f[0].offsetTop+o.fh:0)+o.p,d,o.ms);
       o.exp?o.exp(nu):null;
       document.cookie=o.id+'='+nu+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/;':';');
       o.f=f;
      }
     },
    
     animate:function(o,a,f,t,srt,mS,nxt){
      clearTimeout(a[3]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[2]=Math.max(n,f<0||t<0?now:0);
       a[1]?a[0].style[a[1]]=a[2]+'px':a[0].style.clip='rect(0px,'+o.fw+'px,'+a[2]+'px,0px)';
      }
      if (ms<mS){
       a[3]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
      }
      else {
       a[2]=t;
       a[1]?a[0].style[a[1]]=a[2]+'px':a[0].style.clip='rect(0px,'+o.fw+'px,'+a[2]+'px,0px)';
       nxt?a[0].style.top='-30000px':null;
      }
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'=[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
     },
    
     bycls:function (nme,el){
      for (var els=el.getElementsByTagName('*'),ary=[],z0=0;z0<els.length;z0++){
       if((' '+nme+' ').match(' '+els[z0].className+' ')){
        ary.push(els[z0]);
       }
      }
      return ary;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     }
    
    }
    
    new zxcExpandGallery({
     GalleryID:'tst',       // the unique ID name of the gallery parent DIV element.                    (string)
     ThumbClass:'thumb',    // the common class name of the thumb nail DIV elements.                    (string)
     ExpandClass:'full',    // the common class name of the expanded DIV elements.                      (string)
     Animate:500,           //(optional) the animation duration in milli seconds.                       (number, default = 1000)
     Expand:4,              //(optional) the index number of the Expand DIV to display.                 (number, default = no expanded DIV on initalization)
     Toggle:true,           //(optional) false = the expanded DIV can not be toggled close.             (number, default = true = the expanded DIV can be toggled close)
     Persistence:1,         //(optional) the number of days to restore the last display.                (number, default = -1)
                            //(optional) 'session' = restore the last display for the browser session.  (number, default = -1 days)
     OnExpand:function(nu){ //(optional) a function to be call when an epand DIV is expanded or closed. (function, default = no function)
      // the script returns the index number of the expanded DIV or null if all DIVs are closed.
     }
    });
    /*]]>*/
    </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/

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

    davelf (04-01-2013)

  4. #3
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    458
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    thank you so much.
    _____________________

    David Demetrius // davejob
    _____________________

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    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/

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

    davelf (04-03-2013)

Similar Threads

  1. bullet list accordion menu header expand + link
    By premier in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-22-2011, 04:58 PM
  2. Website portfolio
    By jcdesigns in forum Looking for such a script or service
    Replies: 0
    Last Post: 09-29-2010, 07:35 PM
  3. Filterable Portfolio
    By shas1280 in forum JavaScript
    Replies: 1
    Last Post: 08-18-2010, 08:04 AM
  4. Bullet List Accordion Menu: Last Category Won't Expand
    By ZenAgain in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 08-10-2008, 07:06 PM
  5. Photographer's Portfolio
    By ReadyToLearn in forum Flash
    Replies: 6
    Last Post: 05-04-2008, 04:01 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
  •