Results 1 to 2 of 2

Thread: Image smoothing on jQuery Image Magnify v1.11

  1. #1
    Join Date
    Sep 2012
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Image smoothing on jQuery Image Magnify v1.11

    1) Script Title: jQuery Image Magnify v1.11

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agemagnify.htm

    3) Describe problem: Hello, I've installed the code for Image Magnify and it's working really well. The only issue I'm having is that the non-magnified image looks really poor in IE, FF, Opera (It looks good in Chrome). On the Mac side, FF, Safari, mobile phones, iPad looks good. Non of the css image smoothing techniques I've tried seem to work. Is there a fix for this? Also, I tried the suggestion in the post "JQuery Image Magnify - image rendering problem", but this did not work.

    http://crestviewmontana.com/stage/html/community.html

    Thanks for your help!
    Jon
    Last edited by More2Do; 07-15-2014 at 11:28 PM. Reason: Tried suggestion in similar threads

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    the page image is distorted because the size is much less than the natural image
    the DD script does not allow you to specify different image SRCs for the page and zoom image

    try this

    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[*/
    
    .zoomimg {
      z-Index:1000;border:solid red 2px;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    <img id="imagebox" src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" class="magnify fancy" style="width: 215px; height: 275px"/></body>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Zoom (16-July-2014)
    // by: Vic P{hillips - http://www.vicsjavascripts.org/
    
    
    var zxcImageZoom={
    
     init:function(o){
      var id=o.ImageID,z=o.Zoom,ms=o.Animate,img=document.getElementById(id);
      if (img){
       var i=document.createElement('IMG'),m;
       i.style.position='fixed';
       i.style.width=i.style.height='0px';
       m=i.cloneNode(false)
       m.style.bottom=m.style.right='0px';
       i.src=o.ZoomSRC||img.src;
       i.className=o.ZoomClass;
       i.style.left=i.style.top='-3000px';
       o.ni=new Image();
       o.ni.src=i.src;
       o.img=img;
       o.m=m;
       o.ud=true;
       document.body.appendChild(i);
       document.body.appendChild(m);
       o.z=typeof(z)=='number'&&z>1?z:null;
       o.ms=typeof(ms)=='number'&&ms>100?ms:1000;
       o.a=[[i,'width',img.width],[i,'height',img.height],[i,'left',0],[i,'top',0],[i,'',0]];
       this.addevt(img,'click','open',o);
       this.addevt(i,'click','open',o);
       this.addevt(window,'resize','resize',o);
       this.o=o;
      }
     },
    
     open:function(o){
      if (o.ni.width>40){
       this.o!=o&&!this.o.ud?this.open(this.o):null;
       var p=this.pos(o.img),w=o.img.width,h=o.img.height,zw=o.z?w*o.z:o.ni.width,zh=o.z?h*o.z:o.ni.height,x=Math.max((o.m.offsetLeft-zw)/2,5),y=Math.max((o.m.offsetTop-zh)/2,5),s=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
       this.animate(o,o.a[0],o.ud?w:zw,o.ud?zw:w,new Date(),o.ms);
       this.animate(o,o.a[1],o.ud?h:zh,o.ud?zh:h,new Date(),o.ms);
       this.animate(o,o.a[2],o.ud?p[0]-s[0]:x,o.ud?x:p[0]-s[0],new Date(),o.ms);
       this.animate(o,o.a[3],o.ud?p[1]-s[1]:y,o.ud?y:p[1]-s[1],new Date(),o.ms);
       this.animate(o,o.a[4],o.ud?0:100,o.ud?100:0,new Date(),o.ms);
       o.ud=!o.ud;
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     resize:function(o){
      if (!o.ud){
       this.animate(o,o.a[2],o.a[2][2],Math.max((o.m.offsetLeft-o.a[0][2])/2,5),new Date(),o.ms/2);
       this.animate(o,o.a[3],o.a[3][2],Math.max((o.m.offsetTop-o.a[1][2])/2,5),new Date(),o.ms/2);
      }
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      this.opc(o.img,50);
      if (isFinite(n)){
       n=Math.max(f<0||t<0?n:0,n);
       a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
       a[2]=n;
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t;
       a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
       if (!a[1]){
        if (o.ud){
         oop.opc(o.img,100);
         a[0].style.left=a[0].style.top='-3000px';
        }
       }
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    
    }
    
    zxcImageZoom.init({
     ImageID:'imagebox',                                                                 // the unique ID name of the page image.              (string)
     ZoomClass:'zoomimg',                                                                // the class name of the zoom image(for z-Index etc). (string)
     ZoomSRC:'http://crestviewmontana.com/stage/images/crestview_plot_map-rollover.jpg', //(optional) the SRC of the zoom image.               (string, default = the src of the page image)
     Zoom:4,                                                                             //(optional) the zoom factor.                         (number, default = the natural zoom image size)
     Animate:1000                                                                        //(optional) the animation duration in milliseconds.  (number, default = 1000)
    })
    
    /*]]>*/
    </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/

Similar Threads

  1. Cross Browser Issues using jQuery Image Magnify with Text and Image Crawler
    By RelearningHTML in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-17-2011, 04:58 AM
  2. jQuery Image Magnify: change position of enlarged image
    By Michael-onSaba in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-02-2011, 12:57 AM
  3. jQuery Image Magnify v1.1 image pops up behind flash video in IE
    By minja32 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-30-2010, 03:44 PM
  4. JQuery Image Magnify - image rendering problem
    By caleb22 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 01-05-2010, 05:38 PM
  5. Jquery image magnify, magnify onmouseover
    By azoomer in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-15-2009, 09:27 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
  •