1

I'm looking for a jquery or javascript image magnifier on hover that does not require two images ( large and small ) to work. I've searched for hours and haven't found any that work the way they are said to.

  • iZoom,
  • jQZoom,
  • tjpZoom,
  • Image Magnify,
  • ImageZoom,
  • ImageLens,
  • Loupe

have all been tried and don't work for one reason or another with my current config.

So at this point I'm looking for non-googled results since I've gone through 25 pages of results from 'jquery Image Magnifier' and nothing has worked.

Gautam
  • 7,868
  • 12
  • 64
  • 105
sadmicrowave
  • 39,964
  • 34
  • 108
  • 180
  • 2
    Why not make your own? It's a simple `animate({width: '100%'})` if the image is scaled down. – Blender May 20 '11 at 16:02
  • 3
    If all the big plugins don't work for you, what is so unique about your situation? – Michael Haren May 20 '11 at 16:03
  • I wouldn't suggest to only use one image since all large images have to be loaded in that case which consumes a lot of bandwidth. – pimvdb May 20 '11 at 16:03
  • Look at this http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm , this seems to use single image, but obviously magnifying the same, it gets pixellated. – Satish May 20 '11 at 16:05
  • @satish - I've tried that one and it has bugs – sadmicrowave May 20 '11 at 16:14
  • @pimvdb - I only have 1 of each image - there is no ability for me to get a larger one. – sadmicrowave May 20 '11 at 16:15
  • @Michael Haren - my unique situation is that these images are generated from a special manufacturing machine which optically inspects objects and takes pictures of defects found - I only have 1 of each image and these images need to be loaded in a 'live' manner. – sadmicrowave May 20 '11 at 16:16
  • I wrote my own once using jQuery - it was a little buggy and I haven't gotten round to fixing it, but essentially I just had a large image (650x650 or similar) inside a medium sized container (about 300x300 px) and magnified it to full size on rollover. The container stayed put and the image was moved around when the cursor moved, it worked pretty well aside from I couldn't get it to fire sometimes. Something like that might be a good solution for you. – totallyNotLizards Dec 15 '11 at 11:04
  • also, you might try just looking for pure javascript ones if you haven't already - you may find there are a few out there that aren't so bad - http://www.google.co.uk/search?q=javascript+image+zoom+-jquery – totallyNotLizards Dec 15 '11 at 11:07

1 Answers1

3

You could render a duplicate of the image in a hidden canvas, grab a rectangle around the mouse position and render a magnification of this part in a second visible canvas. It is written in very few lines of code - even in plain Javascript:

var zoom = function(img){
    var canS = document.createElement('canvas'),
        can = document.createElement('canvas'),
        ctxS = canS.getContext('2d'),
        ctx = can.getContext('2d'),
        id = ctx.createImageData(240,240),
        de = document.documentElement;
    can.className = 'zoom';
    can.width = can.height = 240;
    canS.width = img.width;
    canS.height = img.height;
    img.parentElement.insertBefore(can,img.nextSibling);
    ctxS.drawImage(img,0,0);
    img.onmousemove = function(e){
        var idS=ctxS.getImageData(
            e.clientX-e.target.offsetLeft+(window.pageXOffset||de.scrollLeft)-20,
            e.clientY-e.target.offsetTop+(window.pageYOffset||de.scrollTop)-20,
            40,40);
        for (var y=0;y<240;y++)
            for (var x=0;x<240;x++)
                for (var i=0;i<4;i++)
                    id.data[(240*y+x)*4+i] = idS.data[(40*~~(y/6)+~~(x/6))*4+i];
        ctx.putImageData(id,0,0);
    }
}

Example: http://kirox.de/test/magnify.html

There's a link to an improved version featuring an adjustable round lens with light effects and barrel distortion. Also works with canvases.

Restrictions:

  • does not work with cross domain image URLs
  • does not work in older versions of IE
  • in the current version of Firefox 25 there is a significant slowdown after a while of hovering
oyophant
  • 1,294
  • 12
  • 23
  • Interesting solution. However, next time try to provide some code and explanation, not just an url. – Cthulhu Dec 03 '13 at 12:25