Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Posts
    152
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Is there a plugin to get the effect?

    http://phplist.xxmn.com/1.html

    put the mouse over the product image there is a mask on the image. on its right. shows the image. when move the mask. the image on the right shows the according part. thank you

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    That’s a zoom effect. Shouldn’t be hard to find something if you use the right search keywords.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    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[*/
    .mask {
      position:absolute;z-Index:101;width:200px;height:200px;background-Color:#FFFFCC;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    .viewer {
      position:absolute;z-Index:101;left:550px;top:20px;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <img src="http://ftcline.com/s/mic/12037/1.jpg_small.jpg" onmouseup="zxcViewer.swap('mag1','http://ftcline.com/s/mic/12037/1.jpg','');"/>
    <img src="http://ftcline.com/s/mic/12037/2.jpg_small.jpg" onmouseup="zxcViewer.swap('mag1','http://ftcline.com/s/mic/12037/2.jpg','');"/>
                 <!--
                 where:
                 parameter 0 = the id of the featured image             (string)
                 parameter 1 =  the src of the featured image           (string)
                 parameter 2 =  (optional) the src of the viewer image  (string, default = the src of the featured image)
                 -->
    
    <img id="mag1" src="http://ftcline.com/s/mic/12037/1.jpg" />
    
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    // Image Viewer (06-July-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcViewer={
    
     init:function(o){
      var img=document.getElementById(o.ImageID),msk=document.createElement('DIV'),viewer=document.createElement('DIV'),m=o.MagnifyBy,m=typeof(m)=='number'&&m<=1?m:1.5,nimg=[new Image(),new Image()],obj;
      msk.className=o.MaskClass;
      msk.style.left='-1000px';
      msk.style.top='-1000px';
      document.body.appendChild(msk);
      var mw=this.int(msk,'width'),mh=this.int(msk,'height'),vimg=img.cloneNode(false);
      viewer.className=o.ViewerClass;
      viewer.style.overflow='hidden';
      viewer.style.visibility='hidden';
      viewer.style.width=mw*m+'px';
      viewer.style.height=mh*m+'px';
      vimg.style.position='absolute';
      vimg.src=o.ViewerImageSRC||img.src;
      viewer.appendChild(vimg);
      document.body.appendChild(viewer);
      nimg[0].src=img.src;
      nimg[1].src=vimg.src;
      obj={
       nimg:nimg,
       img:img,
       msk:msk,
       mskw:mw,
       mskh:mh,
       viewer:viewer,
       vimg:vimg,
       m:m
      }
      this['zxc'+o.ImageID]=obj;
      this.load(obj);
     },
    
     move:function(e,o){
      var mse=this.mse(e),p=this.pos(o.img),lft,top;
      if (mse[0]>p[0]&&mse[0]<p[0]+o.iw&&mse[1]>p[1]&&mse[1]<p[1]+o.ih){
       o.viewer.style.visibility='visible';
       lft=Math.min(Math.max(mse[0]-o.mskw/2,p[0]),p[0]+o.iw-o.mskw);
       top=Math.min(Math.max(mse[1]-o.mskh/2,p[1]),p[1]+o.ih-o.mskh);
       o.msk.style.left=lft+'px';
       o.msk.style.top=top+'px';
       o.vimg.style.left=(lft-p[0])/(o.iw-o.mskw)*o.vx+'px';
       o.vimg.style.top=(top-p[1])/(o.ih-o.mskh)*o.vy+'px';
      }
      else if (o.viewer.style.visibility=='visible'){
       o.viewer.style.visibility='hidden';
       o.msk.style.left='-1000px';
      }
     },
    
     swap:function(id,src,vsrc){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.dly);
       o.nimg=[new Image(),new Image()];
       o.nimg[0].src=src;
       o.nimg[1].src=vsrc||src;
       this.load(o);
      }
     },
    
     load:function(o){
      for (var oop=this,z0=0;z0<o.nimg.length;z0++){
       if (o.nimg[z0].width<40){
        o.dly=setTimeout(function(){ oop.load(o); },100);
        return;
       }
      }
      if (!o.init){
       o.iw=o.img.width;
       o.ih=o.img.height
       o.vimg.style.width=o.iw*o.m+'px';
       o.vimg.style.height=o.ih*o.m+'px';
       o.vx=o.mskw*o.m-o.iw*o.m;
       o.vy=o.mskh*o.m-o.ih*o.m;
       this.addevt(document,'mousemove','move',o);
       o.init=true;
      }
      else {
       o.img.src=o.nimg[0].src;
       o.vimg.src=o.nimg[1].src;
      }
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     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){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     },
    
     int:function(o,p){
      return parseInt(this.style(o,p));
     },
    
     style:function(o,p){
      if (o.currentStyle){
       return o.currentStyle[p.replace(/-/g,'')];
      }
      return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
     }
    
    }
    
    zxcViewer.init({
     ImageID:'mag1',        // the unique ID name of the featured image.        (string)
     MaskClass:'mask',      // the class name of the image mask.                (string)
     ViewerClass:'viewer',  // the class name of the viewer DIV.                (string)
     ViewerImageSRC:'http://ftcline.com/s/mic/12037/1.jpg', // the src viewer image.                (string, default = the featured image src)
     MagnifyBy:1.5          //(optional) the magnification of the viewer image. (number, mimimum = 1, default = 1.5)
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    or
    http://www.vicsjavascripts.org.uk/Im...geViewerII.htm
    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
    Regular Coder
    Join Date
    Jul 2009
    Posts
    152
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD
    Good. many thanks. if i want to change the size of the mask or the image on the right. how do i do? thank you

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    the mask size is set in the .mask class rule, the viewer is the mask size*magnification
    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/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •