SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help me find a slider similair to this one.

    I want to have an imageslider similair to the one used on this WP theme. http://theme.crumina.net/index.php?theme=onetouch

    Anyone have any tips? I don't want it to be a WP plugin tho.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,488
    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[*/
    .wrapper {
      position:absolute;left:200px;top:100px;width:300px;height:226px;border:solid red 1px;
    }
    
    .wrapper IMG {
      position:absolute;left:-26px;top:-18px;width:300px;height:226px;
    }
    
    
    .mask {
      position:absolute;left:0px;top:26px;width:300px;height:226px;background-Color:#FFFFCC;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
     <div id="i1" class="wrapper" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
      <div class="mask" ></div>
     </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcZoom(o){
     var obj=document.getElementById(o.ID),z=o.Zoom,ms=o.Speed,i=obj?obj.getElementsByTagName('IMG')[0]:null;
     if (obj&&i){
      var msk=obj.getElementsByTagName('DIV')[0],msk=msk?msk:obj.cloneNode(false),w=obj.offsetWidth,h=obj.offsetHeight,z=typeof(z)=='number'?z/100:110,z=Math.max(z,1),ms=typeof(ms)=='number'&&ms>0?ms:1000;
      obj.style.overflow='hidden';
      i.style.position='absolute';
      i.style.left='0px';
      i.style.top='0px';
      i.style.width=w+'px';
      i.style.height=h+'px';
      msk.style.position='absolute';
      msk.style.top=h+'px';
      this.ary=[[i,'width',w,Math.round(w*z),w],[i,'height',h,Math.round(h*z),h],[i,'left',0,Math.round((w-w*z)/2),0],[i,'top',0,Math.round((h-h*z)/2),0],[msk,'top',h,0,h]];
      this.ms=ms;
      this.addevt(obj,'mouseover','Zoom',true);
      this.addevt(obj,'mouseout','Zoom',false);
     }
    }
    
    zxcZoom.prototype={
    
     Zoom:function(ud){
      var o=this,a=o.ary,ms=o.ms*Math.abs((o.ary[0][4]-a[0][ud?3:2])/(a[0][2]-a[0][3])+.001)+20,d=new Date(),z0=0;
      for (;z0<5;z0++){
       o.animate(a[z0],a[z0][4],a[z0][ud?3:2],d,ms);
      }
     },
    
     animate:function(a,f,t,srt,mS){
      clearTimeout(a[5]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[4]=Math.round(n);
       a[0].style[a[1]]=a[4]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(a,f,t,srt,mS); },10);
      }
      else {
       a[4]=t;
       a[0].style[a[1]]=t+'px';
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p); });
      }
     }
    
    }
    
    
    new zxcZoom({
     ID:'i1',
     Zoom:110,
     Speed:1000
    });
    /*]]>*/
    </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
  •