SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict bimalpoudel's Avatar
    Join Date
    Feb 2009
    Location
    Kathmandu, Nepal
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript based filp card gallery

    I did not know what made me love the flipping image gallery - where when mouse over, it shows the details of the image (text) by replacing the original image.
    I am searching for some javascript version of this behavior.

    Here is one sample (flash version):
    http://advantagesystemsinteractive.n...p-card-gallery

    Any alternatives?
    Preferably jquery version would be good to know and use.
    Bimal Poudel @ Sanjaal Framework over Smarty Template Engine
    ASKING INTERESTING QUESTIONS ON SITEPOINT FOURM

    Hire for coding support - PHP/MySQL

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you are refering to the flip only

    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[*/
    
    #img {
      position:absolute;left:200px;top:100px;width:200px;height:150px;border:solid red 1px;
    }
    
    #img IMG{
      position:absolute;left:0px;top:0px;width:200px;height:150px;
    }
    
    
    /*]]>*/
    </style></head>
    
    <body>
     <div id="img" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
      <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" />
     </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcFlip(o){
     var oop=this,obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),ms=o.FlipDuration;
     imgs[0].style.width='0px';
     imgs[0].style.left=imgs[1].width/2+'px';
     oop.sz=imgs[1].width;
     oop.imgs=imgs;
     oop.ms=typeof(ms)=='number'?ms/2:500;
     imgs[2].onmouseover=function(){ oop.flip(1); }
     imgs[2].onmouseout=function(){ oop.flip(0); }
    }
    
    zxcFlip.prototype={
    
     flip:function(nu){
      var oop=this,imgs=oop.imgs,sz=oop.sz;
       var ms=this.ms*Math.abs(imgs[nu].width/sz);
       clearTimeout(oop.to1);
       clearTimeout(oop.to2);
       this.animate('width',imgs,nu,imgs[nu].width,0,new Date(),ms,'to1');
       this.animate('left',imgs,nu,imgs[nu].offsetLeft,sz/2,new Date(),ms,'to2',true);
     },
    
     animate:function(mde,imgs,nu,f,t,srt,mS,to,ud){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       imgs[nu].style[mde]=Math.max(now,0)+'px';
      }
      if (ms<mS){
        oop[to]=setTimeout(function(){ oop.animate(mde,imgs,nu,f,t,srt,mS,to,ud); },10);
      }
      else {
       imgs[nu].style[mde]=t+'px';
       if (ud){
        nu=nu==0?1:0;
        this.animate('width',imgs,nu,imgs[nu].width,oop.sz,new Date(),mS);
        this.animate('left',imgs,nu,imgs[nu].offsetLeft,0,new Date(),mS);
       }
      }
     }
    
    }
    
    new zxcFlip({
     ID:'img',         // the unique ID name of the parent node. (string)
     FlipDuration:200  //(optional) the flip duration in milli seconds. (number, default = 1000)
    });
    /*]]>*/
    </script>
    
    </body>
    
    </html>

  3. #3
    SitePoint Addict bimalpoudel's Avatar
    Join Date
    Feb 2009
    Location
    Kathmandu, Nepal
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool flipping

    Hi Vic,
    Thank you for the codes.
    Very cool and compact script - I liked it.

    I would expect a text based caption/description in the next flip (that comes when mouse over even happens) - which would be different than the image.
    When is mouse is moved back the original image appears.

    :-)
    Bimal Poudel @ Sanjaal Framework over Smarty Template Engine
    ASKING INTERESTING QUESTIONS ON SITEPOINT FOURM

    Hire for coding support - PHP/MySQL

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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[*/
    
    #img {
      position:absolute;overflow:hidden;left:200px;top:100px;width:200px;height:150px;background-Color:#FFFFCC;border:solid red 1px;
    }
    
    #img2 {
      position:absolute;left:500px;top:100px;width:200px;height:150px;background-Color:#FFFFCC;border:solid red 1px;
    }
    
    .card {
      position:absolute;left:0px;top:0px;width:200px;height:150px;border-Width:0px;
    }
    
    .div{
      overflow:hidden;background-Color:red;float:left;text-Align:center;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
     <div id="img" >
      <div class="card div" ><div class="card div" >Some Text Some Text Some Text Some Text</div></div>
      <img class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
      <img class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" />
     </div>
    
     <div id="img2" >
      <img class="card" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
      <div class="card div" ><div class="card div" >Some Text Some Text Some Text Some Text</div></div>
     </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcFlip(o){
     var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','height','offsetTop','offsetHeight']:['left','width','offsetLeft','offsetWidth'],obj=document.getElementById(o.ID),imgs=obj.childNodes,ms=o.FlipDuration,sz=obj[mde[3]],ary=[],z0=0
     for (;z0<imgs.length;z0++){
      if (imgs[z0].nodeType==1){
       ary.push(imgs[z0].nodeName.toUpperCase()!='A'?imgs[z0]:imgs[z0].getElementsByTagName('*')[0]);
      }
     }
     ary[0].style[mde[1]]='0px';
     ary[0].style[mde[0]]=sz/2+'px';
     oop.mde=mde;
     oop.sz=sz;
     oop.ary=ary;
     oop.ms=typeof(ms)=='number'?ms/2:500;
     obj.onmouseover=function(){ oop.flip(1); }
     obj.onmouseout=function(){ oop.flip(0); }
    }
    
    zxcFlip.prototype={
    
     flip:function(nu){
      var oop=this,mde=oop.mde,ary=oop.ary,sz=oop.sz,max=Math.max(ary[0][mde[3]],ary[1][mde[3]]),ms=oop.ms*max/sz;
      clearTimeout(oop.to1);
      clearTimeout(oop.to2);
      oop.to1=setTimeout(function(){
       oop.animate(mde[1],ary,nu,ary[nu][mde[3]],0,new Date(),ms,'to1');
       oop.animate(mde[0],ary,nu,ary[nu][mde[2]],sz/2,new Date(),ms,'to2',true);
      },nu==1?50:200);
     },
    
     animate:function(mde,ary,nu,f,t,srt,mS,to,ud){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       ary[nu].style[mde]=Math.max(now,0)+'px';
      }
      if (ms<mS){
        oop[to]=setTimeout(function(){ oop.animate(mde,ary,nu,f,t,srt,mS,to,ud); },10);
      }
      else {
       ary[nu].style[mde]=t+'px';
       if (ud){
        nu=nu==0?1:0;
        mde=oop.mde;
        this.animate(mde[1],ary,nu,ary[nu][mde[3]],oop.sz,new Date(),mS);
        this.animate(mde[0],ary,nu,ary[nu][mde[2]],0,new Date(),mS);
       }
      }
     }
    
    }
    
    new zxcFlip({
     ID:'img',          // the unique ID name of the parent node.                   (string)
     Mode:'horizontal', //(optional) mode of execution, 'horizontal' or 'vertical'. (number, default = 'horizontal')
     FlipDuration:200   //(optional) the flip duration in milli seconds.            (number, default = 1000)
    });
    
    new zxcFlip({
     ID:'img2',
     Mode:'vertical'
    });
    /*]]>*/
    </script>
    
    </body>
    
    </html>


Tags for this Thread

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
  •