WEB How do I imitate this image scrollable interface?

Discussion in 'OT Technology' started by SPACECATAZ, Jun 25, 2009.

  1. SPACECATAZ

    SPACECATAZ New Member

    Joined:
    Dec 22, 2006
    Messages:
    2,502
    Likes Received:
    0
    Looked at numerous jQuery/mootools plugins/php scripts and I couldn't find anything remotely similar. I want to put my portfolio images in a vertical scroll bar interface like that and then use fancybox to enlarge them.

    http://www.squizzi-designs.com/portfolio.php?ID=71
     
  2. tryfuhl

    tryfuhl New Member

    Joined:
    Oct 4, 2003
    Messages:
    75,450
    Likes Received:
    0
    Location:
    MD/DC Metro
    dl their javascript files and check it out
     
  3. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
  4. tryfuhl

    tryfuhl New Member

    Joined:
    Oct 4, 2003
    Messages:
    75,450
    Likes Received:
    0
    Location:
    MD/DC Metro
    www.squizzi-designs.com/javascript/jquery-1.2.6.pack.js

    www.squizzi-designs.com/javascript/ddaccordion.js

    2 more files listed at end of code
    Code:
    <script type="text/javascript">
    //Initialize 2nd demo:
        ddaccordion.init({
            headerclass: "portfolioCategoryName", //Shared CSS class name of headers group
            contentclass: "portfolioCategoryContent", //Shared CSS class name of contents group
            revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
            mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
            collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
            defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
            onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
            animatedefault: false, //Should contents open by default be animated into view?
            persiststate: true, //persist state of opened contents within browser session?
            toggleclass: ["closedHeader", "openHeader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
            togglehtml: ["prefix", "<img src='images/arrowRight.jpg' /> ", "<img src='images/arrowDown.jpg' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
            animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
            oninit:function(expandedindices){ //custom code to run when headers have initalized
                //do nothing
            },
            onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                //do nothing
            }
        })
        
        function MM_swapImgRestore() { //v3.0
          var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
        }
        function MM_preloadImages() { //v3.0
          var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
            var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
            if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
        }
        
        function MM_findObj(n, d) { //v4.01
          var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
            d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
          if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
          for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
          if(!x && d.getElementById) x=d.getElementById(n); return x;
        }
        
        function MM_swapImage() { //v3.0
          var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
           if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
        }
        </script>
        
        <script type="text/javascript" src="javascript/jquery.js"></script>
        <script type="text/javascript" src="javascript/thickbox.js"></script>
    
    
     
  5. tryfuhl

    tryfuhl New Member

    Joined:
    Oct 4, 2003
    Messages:
    75,450
    Likes Received:
    0
    Location:
    MD/DC Metro
  6. SPACECATAZ

    SPACECATAZ New Member

    Joined:
    Dec 22, 2006
    Messages:
    2,502
    Likes Received:
    0
    wow, that site is amazing(dynamicdrive). :bowdown:

    also, thanks guys.
     
  7. brds

    brds OT Supporter

    Joined:
    Jun 26, 2006
    Messages:
    17,652
    Likes Received:
    15
    Location:
    Atlanta
    i would change the onhover to onclick... so that the user has to click it instead of just put their mouse over it.
     
  8. Ricky

    Ricky █▄ █▄█ █▄ ▀█▄

    Joined:
    Jun 17, 2005
    Messages:
    38,766
    Likes Received:
    6
    like the oldest website ever :rofl:

    i remember using that website back when i had a freewebs page :rofl:
     
  9. tryfuhl

    tryfuhl New Member

    Joined:
    Oct 4, 2003
    Messages:
    75,450
    Likes Received:
    0
    Location:
    MD/DC Metro
    rofl werd

    I used to get all of my coooool dhtml shit there :rofl:
     
  10. Ricky

    Ricky █▄ █▄█ █▄ ▀█▄

    Joined:
    Jun 17, 2005
    Messages:
    38,766
    Likes Received:
    6
  11. tryfuhl

    tryfuhl New Member

    Joined:
    Oct 4, 2003
    Messages:
    75,450
    Likes Received:
    0
    Location:
    MD/DC Metro
  12. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    it's called an accordion
     
  13. tryfuhl

    tryfuhl New Member

    Joined:
    Oct 4, 2003
    Messages:
    75,450
    Likes Received:
    0
    Location:
    MD/DC Metro
    HEY THANKS
     

Share This Page