timoni on Mar 31, 2011 12:49 AM

This is awesome; thanks! I'd like to pair it with a before/after function, if possible. Would this be easy to do?

timoni on Mar 31, 2011 12:49 AM

This is awesome; thanks! I'd like to pair it with a before/after function, if possible. Would this be easy to do?

Mista Koo on Apr 5, 2011 07:17 AM

Square lens in Firefox 3.6.

Jess on Apr 5, 2011 07:58 AM

Wow!!!! Thank you. This is wonderful.

Ramakanth on Apr 5, 2011 09:02 AM

This is Awesome. Thanks for sharing.

Ibrahim Azhar Armar on Apr 5, 2011 01:00 PM

this is so brilliant, i was wondering if this could be possible using jQuery. and you have it developed, i am surely going to implement in my website. thanks a lot.

Andreas on Apr 5, 2011 01:26 PM

To bad it only works on elements that are inside a position relative element, cant think its a big problem to fix.

Karsten on Apr 6, 2011 03:41 AM

Hello,

that is a nice effect.

thank you!

Karsten from germany

Andreas on Apr 6, 2011 04:49 AM

@admin, removed some of your code ( 127 bytes smaller when packed ) and works the same: http://voigt.se/sand..../jquery.imageLens.js

also removed the image you create, feels that its not needed to keep the image after you got the Ratio from the image. Will also see if I cant get it to work with the problem I posted above.

Andreas on Apr 6, 2011 04:50 AM

Damn posted before I was done, you have a object you arent using: targetSize = target.size(); just as you know :)

Andy on Apr 6, 2011 06:23 AM

Could this be used in wordpress?

Andreas on Apr 6, 2011 06:52 AM

@Andy, yes its javascript ;)

ilana on Apr 6, 2011 12:32 PM

This is great! i'm just wondering how to turn zoom off? For instance, using the second example, the lens showing a second image, but not wanting the zoom feature....

thanks for your advice.

ilana

ilana on Apr 6, 2011 12:32 PM

This is great! i'm just wondering how to turn zoom off? For instance, using the second example, the lens showing a second image, but not wanting the zoom feature....

thanks for your advice.

ilana

ilana on Apr 6, 2011 12:51 PM

nevermind, i realized i just had to change the other image size, and adjust the positioning slightly (-4 px left and top)

Andy on Apr 6, 2011 02:51 PM

Thanks Andreas, but when I go to activate your plugin I get Wordpress > Error 'This plugin does not have a valid header' - I'm not a web-developer so I may be doing something wrong - wish I knew what as I'd love to use this amazing effect!

Andy on Apr 6, 2011 03:05 PM

Sorry, Ramesh not Andreas :)

ryan on Apr 6, 2011 11:45 PM

This is very cool. The round lens on this awesome, I wish that was supported in Firefox :(

@andreas brings up a good point, I have positioning issues too that I think are related to main image position not being relative.

@Andreas, what are you trying as a fix to that?

Andreas on Apr 7, 2011 02:15 AM

The quickest fix I can come up with is to set a position relative on the parent, or wrap a new element with a relative position, and change some of the code, done some tests: http://voigt.se/sandbox/imageLens/demo2.html but not fully happy with it.

Andreas on Apr 7, 2011 02:17 AM

ryan: Update to Firefox4, I have no problem with the result, but you can get it to work with -moz-border-radius and -webkit-border-radius(browser prefix)

stryju on Apr 8, 2011 01:26 AM

broken in chrome ( won't scroll the image within "lens" - pm me if You need help with that )

as for square lens thing - poor support, that's that.
You forgot about prefixes ( "-webkit-", "-moz-" ), so either add prefixes OR use jQuery cssHooks ( http://api.jquery.com/jQuery.cssHooks/ ) as it's a jQ plugin.

stryju on Apr 8, 2011 01:29 AM

oh, and in IE8 it's way too slow...

Jeppe on Apr 8, 2011 12:24 PM

Felt inspired, and recreated your imageLens plugin so that it has the round shape in IE7 and 8 as well.. Its not absolutely perfect yet, but feel free to fork it and what not.

http://goo.gl/KuIn4

Rian Ariona on Apr 10, 2011 09:49 AM

good work!! but when i tried to apply it, the lens is going to far from the cursor?? what should i do??

Jeppe on Apr 11, 2011 01:35 AM

@Ramesh
Updated my blog, the post is now located at http://blog.bobslaed....magelens-plugin.html

Andreas on Apr 11, 2011 02:20 AM

@Rian Ariona: Think its because you load dynamic content, put the offset code within the mousemove event so it reads everytime.

Rian Ariona on Apr 11, 2011 03:19 AM

Hhmm.. can you give me the example? :)

Andreas on Apr 11, 2011 06:02 AM

Ramesh, you can update my link also ;)

Rian Ariona look at my demo3 you will se the offset() code is called everytime, I had the same problem as you, thats why I moved the code into that event instead

http://voigt.se/sandbox/imageLens/demo3.html

Ricardo Schmidt on Apr 20, 2011 06:04 AM

not working in Google Chrome 10.0.648.151. The lens is round, but it dont scroll... just the top left piece of image is showing anywhere the lens go.

Andreas on Apr 20, 2011 08:57 AM

@Ricardo: Can't recreate your problem not with 10.0.648.151 or with a later version of Chrome either.

fgh on Apr 24, 2011 11:05 PM

cvbcvb

jon on May 1, 2011 11:58 AM

Hi, love the effect. I am trying to add it to a site I am building but having problems, I have added all the code but the lens is not magnifying the image. I am new to jQuery/Javascript and struggling to understand why it's not working properly. Any suggestions would be appreciated. Thanks

Andreas on May 2, 2011 02:39 AM

@Jon have you resized the image you are trying to use the lens on you cant use it on a 100%-sized image, or you have to use the option "imageSrc" to say where the even bigger image exists.

jon on May 2, 2011 02:49 PM

@Andreas, that's where I was going wrong, obvious really! thanks, I appreciate you taking the time to reply.

aykak on May 3, 2011 12:40 AM

wow that is what I am in search and arrived here .. :)

Luke on May 6, 2011 11:29 PM

I'm also getting a square lens in FF 3.6 (Mac).

Andreas on May 8, 2011 05:49 AM

@Luke, look at the comments there are fixes for it

join on May 13, 2011 06:25 PM

????

Raghibsuleman on May 16, 2011 01:47 AM

a very good work thanks...

sadmicrowave on May 19, 2011 02:15 PM

This is great but my lens isn't zooming. The square (FF3.x) shows up and there is a slight offset but no zoom multiplier seems to be active (the 'zoomed' image is the same size as the original) what can I do? can I edit the source somewhere to change this manually? Please help as this is the best magnifier I have found so far!

Andreas on May 21, 2011 08:46 AM

@sadmicrowave look at my response to the @Jon a few comments above, you can also update the plugin to one of the other once to get a rounded lens on FF3.x

Michael on May 27, 2011 12:24 PM

@Andreas, great idea. It's not working on Google Chrome 11.0.696.71, Mac OS10.6 -- exact same problem description as @Ricardo Schmidt above. Safari 5 works brilliantly. in FF4 the "other lens properties" -- the 4th demo -- sometimes doesn't delete the lens on mouse out.

Michael on May 27, 2011 12:24 PM

@Andreas, great idea. It's not working on Google Chrome 11.0.696.71, Mac OS10.6 -- exact same problem description as @Ricardo Schmidt above. Safari 5 works brilliantly. in FF4 the "other lens properties" -- the 4th demo -- sometimes doesn't delete the lens on mouse out.

Djordje on May 27, 2011 05:46 PM

Awesome! Thank you :)

pityandfrida on Jun 3, 2011 03:39 AM

I have a problem with very big original images. IE8 is really slow and crashes after a while.. any suggestions?

Vi?t Coding on Jun 14, 2011 11:19 PM

That 's greate javascript effect ! I like it !

yassien on Jun 23, 2011 10:19 AM

MAn Thanks, But it's not Zooming......

Visual C# Kicks on Jul 13, 2011 02:50 PM

Recently had to implement something similar for work, definitely would have been a time saver

Jay-Arr on Jul 17, 2011 07:48 PM

Hello guyz. just want to ask how to disable the zooming if other button is being clicked. thanks

parkesepeti on Jul 20, 2011 02:09 AM

good job. Thanks

Yousef on Jul 22, 2011 02:52 AM

Thanks, work great.

in IE the lens and the original picture are not align correctly

Pankaj Rai on Aug 8, 2011 12:52 AM

Hi Experts,
If I am calling this effect using class than it will only working in IE. But not working with FF and Chrome.

$("#.zoom").imageLens({ lensSize: 200 });

<img src="pankaj.jpg" id="Img1" class="zoom" width="160" height="160" />

What I am doing wrong.

Andreas on Aug 15, 2011 06:01 AM

@Pankaj Rai: you are trying to find a id named ".zoom" youwant to change that to:

$(".zoom").imageLens({ lensSize: 200 });

Kathy on Aug 24, 2011 12:25 AM

Hi, wondering if anybody could help me out.

Some information about my website -
It contains 5 divs: a wrapper to center my site horizontally, a header, a left sidebar, a right content container, and a footer.
I'm trying to use the script on the right content container (float: right), if that has to do with anything.

Basically the image lens (the magnified part) does not show up where my cursor is. This changes depending on what size the browser window is or what resolution the screen of the computer I'm viewing it from is.

On my particular screen (1366 x 768), this is what I see - http://onzaracing.com/images/lens%20problem.png

Any ideas on how to fix this? Thanks in advance.

eirc on Sep 5, 2011 08:51 AM

A small suggestion about the way that the plugin gets initialized. Usually it's a good idea to add your scripts to the end of the page so they don't stall the page loading. So if you want to use a different image for the lens you have to either add ids and inline javascript or... you can use custom (valid) html5 data attributes. So your image tag looks like:

<img src="small_image.jpg" data-lens-url="big_image.jpg" />

and the script at the end:

$('img[data-lens-src]').each(function() {
$(this).imageLens({ imageSrc: $(this).data('lens-src') });
});

And the suggestion... this seems generic enough to be included in the script by either automatically selecting such an attribute for the lens image source or by including an "initializer" with the code above.

Also add the script to an online repo (github) for easier comments, issues and contributions.

iosif on Oct 14, 2011 03:04 AM

Hi guys,

What do you think about this plug-in?
http://plugins.jquery.com/project/iZoom

Alper A. on Oct 15, 2011 07:13 AM

Hello,

Can someone explain, how to integrate this js in to a wordpress theme?

I downloaded the code and uploaded jquery.imageLens.js in to js folder of my theme.
After that I added the codes in to header:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

But I dont know, where to put $("#img_02").imageLens({ lensSize: 200 }); code in my template.

Please, I need your help!
thanks!

sunny on Dec 9, 2011 09:42 AM

Can someone explain, how to integrate this js in to a wordpress theme?

I downloaded the code and uploaded jquery.imageLens.js in to js folder of my theme.
After that I added the codes in to header:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

But I dont know, where to put $("#img_02").imageLens({ lensSize: 200 }); code in my template.

Sophie on Dec 20, 2011 08:49 AM

Hi, when I draw this image inside a canvas, it doesn't work. Any workaround? Thank you for the code!

Javier on Dec 28, 2011 06:29 AM

Hi! Excellent and very useful effect as well. A query: You can zoom in on a background image defined in a .css? (eg -> background: #fff url(image.jpg) no-repeat;).

Thank you very much and good year 2012! Greetings from Argentina.

Kru on Feb 2, 2012 08:42 AM

Brilliant stuff!

If you want to stop the zoom because you have dynamically changed the picture or you have multiple pictures then you can do the following:

jquery.imageLens.js file > add id field

// Creating lens
var target = $("<div style='" + lensStyle + "' id='zoom_div' class='"

You can then stop the zoom by adding

$("#zoom_div").remove();

anon on Feb 4, 2012 03:29 AM

Hey,

Thanks for this great plugin. I have tried it on a background image and it doesn't seem to work - is it even possible to use it on a background image?

Thanks in advance,

non on Mar 2, 2012 11:05 AM

this is great but i have a question, will i be able to use this if i am applying it to a data binded image?

Sergey on Mar 7, 2012 06:49 PM

Thank you for this plugin - exactly what i needed.
But i found few problems:
1. I've many images with diffrent size on page and lens has wrong position on some images and seems based on last one image.
Solution: change line
obj = $(this); to var obj = $(this);
in return this.each(function () {

2. When user moves mouse quickly out of image, lens stays on image and we have multiple lenses on screen. Same situation on page scrolling.
Solution: add next code
target.mouseout(hideLens)
$(this).mouseout(hideLens)
$(window).scroll(hideLens);

function hideLens() {
target.hide();
}

after line $(this).mousemove(setPosition);

3. I have on my page div that dynamically changes his height. Due to this, lens get incorrect offset. Same thing occurs on resize browser window.
Solution: remove line var offset = $(this).offset(); and add line var offset = obj.offset(); to beginning of setPosition function.

4. In Google Chrome sometimes lens draws only one constant part of big image.
Solution: Move init code to the end of page or attach to the document.onload event.

Modified code:
/*
https://www.dailycoding.com/
*/
(function ($) {
$.fn.imageLens = function (options) {

var defaults = {
lensSize: 100,
borderSize: 4,
borderColor: "#888"
};
var options = $.extend(defaults, options);
var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize)
+ "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize)
+ "px;border: " + String(options.borderSize) + "px solid " + options.borderColor
+ ";background-repeat: no-repeat;position: absolute;";

return this.each(function () {
var obj = $(this);

// Creating lens
var target = $("<div style='" + lensStyle + "' class='" + options.lensCss + "'> </div>").appendTo($(this).parent());
var targetSize = target.size();

// Calculating actual size of image
var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");
var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";

var widthRatio = 0;
var heightRatio = 0;

$(imageTag).load(function () {
widthRatio = $(this).width() / obj.width();
heightRatio = $(this).height() / obj.height();
}).appendTo($(this).parent());

target.css({ backgroundImage: "url('" + imageSrc + "')" });

target.mousemove(setPosition);
$(this).mousemove(setPosition);
target.mouseout(hideLens)
$(this).mouseout(hideLens)
$(window).scroll(hideLens);

function hideLens() {
target.hide();
}

function setPosition(e) {

var offset = obj.offset();
var leftPos = parseInt(e.pageX - offset.left);
var topPos = parseInt(e.pageY - offset.top);

if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {
target.hide();
}
else {
target.show();

leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * (-1));
topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * (-1));
target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' });

leftPos = String(e.pageX - target.width() / 2);
topPos = String(e.pageY - target.height() / 2);
target.css({ left: leftPos + 'px', top: topPos + 'px' });
}
}
});
};
})(jQuery);

zheng on Mar 10, 2012 12:24 AM

Hi I was trying to use this plugin with the jquery booklet plugin and have it one of the folding page but for some reason i cant get the plugin to load. The image comes up fine but the lens does not appear.

Your help would be appreciated

Pat on Mar 15, 2012 11:31 AM

I was trying to use this plug in with the easyPaginate plugin. I still get the paging, but the lens isn't in the right place. the images are very large 947 x 1180. The lens shows up way off the page. Any suggestions?

Thanks

Pat on Mar 15, 2012 12:22 PM

One more thing the lens shows up the the first page and you can use the lens, even if it's off, but on page 2+ all i get is the front corner in the lens.

Thanks

Daniel on Mar 23, 2012 11:28 AM

Great work !

Conrad on Mar 30, 2012 01:23 AM

There is a bug.
Left and top position of lens is not relative to container.
If I change these lines (59-60-61) from

leftPos = String(e.pageX - target.width() / 2);
topPos = String(e.pageY - target.height() / 2);
target.css({ left: leftPos + 'px', top: topPos + 'px' });

to

leftPos = String((e.pageX - offset.left) - target.width() / 2);
topPos = String((e.pageY - offset.top) - target.height() / 2);
target.css({ left: leftPos + 'px', top: topPos + 'px' });

it works.

Thanks to this great plug-in.

wetlip on Mar 31, 2012 12:45 AM

very nice straightforward code code, just what i needed, not more complicaeted as needed.

thank you.

Paul on Apr 5, 2012 04:04 AM

Has anyone tried using this in a jquery slider? I've tried several but if the image is not on the first slide it just won't work!? Very frustrating as it's a great effect.

Hank on Apr 5, 2012 01:04 PM

I tried using a portrait picture and the zoom is not aligning with thumbnail image???
is the code the same for portrait and landscape images?

Hank on Apr 6, 2012 08:21 AM

nevermind to question above, found answer in thread above...must have missed it before?!?

great effect!!

matthias on May 9, 2012 08:55 AM

Hi

Thanks for that plugin!

But: Is there any solution, for hide the mouse? it would be nice to see only the lense, without the cursor...

thank you

Matthias

Huynh hieu on May 29, 2012 09:30 PM

Huynh hieu on May 29, 2012 09:32 PM

thanks for share, but i can't use your effect for text content

Huynh hieu on May 29, 2012 09:32 PM

thanks for share, but i can't use your effect for text content

Patrick on Jun 21, 2012 03:53 AM

I've got a problem : I've changed dynamically the source of the image

document.getElementById(<id...>).src = <src...>

and the zoom is done on the old image source. How can I solve the problem ?

Anna on Jul 10, 2012 06:43 AM

Hi, can anyone help me. I love this magnifier but need to adapt the code to be able to have 3 images on screen complete with 3 magnifiers to compare the 3 zoomed in images. Therefore when you hover over one of the images, it automatically brings up another 2 magnifiers on the other 2 images. Hope this makes sense and someone can help as I am new to javascript.

Thanks
Anna

Mantish on Jul 18, 2012 04:00 PM

Mantish on Jul 18, 2012 04:01 PM

Thanks for the plugin, worked like a charm!

andy browning on Jul 24, 2012 07:56 AM

is there a way to use a custom image as the lens. Want to use an actual magnifying glass image.

cool plug-in btw....

b_b on Aug 7, 2012 09:57 AM

Hi and thanks for this plugin, just found a small error in the script, the lensCss var is not defined in the defaults. Just add this to defaults options and it's ok :

lensCss: 'image_lens'

++

alyssa on Aug 13, 2012 06:48 PM

Thanks you sooooooo much!! It works smoothly!

alyssa on Aug 13, 2012 06:48 PM

Thanks you sooooooo much!! It works smoothly!

Dennis on Sep 17, 2012 06:08 AM

In order to use 'class="lens"' on more than 1 image on 1 page use:

$('.lens').each(function (){ $(this).imageLens({ ... }) });

Sachin B on Sep 20, 2012 11:11 PM

We're trying to use imagelens in a system where I'm able to click on the image and a marker is placed on the image. As we keep clicking, markers (a + sign) gets added. The issue we're facing is that to display the + marker, we're using a DIV, to which something like a

<div id="XY564146" style="position:absolute;margin-left:3px;left:564px;top:146px;"><p class="GP_PLUS">+</p></div>

is appended by javascript. My problem now is that if i try and move this marker layer above the lens, the lens does not show up/work. How can we show a static overlay layer such that the lens will work below it. I would really appreciate all the help in this matter.

Richard Housham on Sep 27, 2012 04:02 AM

It's ok on basic items - the moment you have non relative then it has problems as well as images what change with the width of the page - also causes trouble.
I've still not found a work around for these issues.
- there is one for the relative but the problem for the image size changing isn't working.
Richard

manu on Oct 3, 2012 08:03 AM

Hi, incredible plugin !
I have a problem though : Sometimes the lens doesn't disappear and gets stuck : http://i.imgur.com/mmgOI.png

Have you seen this before, or is it due to some other script on my page ?

Thanks on Nov 15, 2012 11:33 PM

The plug-in work great in jquery booklet only if you update the code with Sergey and Conrad posts.

Code:
/*
https://www.dailycoding.com/
*/
(function ($) {
$.fn.imageLens = function (options) {

var defaults = {
lensSize: 100,
borderSize: 4,
borderColor: "#888"
};
var options = $.extend(defaults, options);
var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize)
+ "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize)
+ "px;border: " + String(options.borderSize) + "px solid " + options.borderColor
+ ";background-repeat: no-repeat;position: absolute;";

return this.each(function () {
var obj = $(this);

// Creating lens
var target = $("<div style='" + lensStyle + "' class='" + options.lensCss + "'> </div>").appendTo($(this).parent());
var targetSize = target.size();

// Calculating actual size of image
var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");
var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";

var widthRatio = 0;
var heightRatio = 0;

$(imageTag).load(function () {
widthRatio = $(this).width() / obj.width();
heightRatio = $(this).height() / obj.height();
}).appendTo($(this).parent());

target.css({ backgroundImage: "url('" + imageSrc + "')" });

target.mousemove(setPosition);
$(this).mousemove(setPosition);
target.mouseout(hideLens)
$(this).mouseout(hideLens)
$(window).scroll(hideLens);

function hideLens() {
target.hide();
}

function setPosition(e) {

var offset = obj.offset();
var leftPos = parseInt(e.pageX - offset.left);
var topPos = parseInt(e.pageY - offset.top);

if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {
target.hide();
}
else {
target.show();

leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * (-1));
topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * (-1));
target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' });

leftPos = String((e.pageX - offset.left) - target.width() / 2);
topPos = String((e.pageY - offset.top) - target.height() / 2);
target.css({ left: leftPos + 'px', top: topPos + 'px' });
/*
leftPos = String(e.pageX - target.width() / 2);
topPos = String(e.pageY - target.height() / 2);
target.css({ left: leftPos + 'px', top: topPos + 'px' });
*/
}
}
});
};
})(jQuery);

Math on Dec 5, 2012 01:40 PM

Hello,
I'm trying to integrate this in galleria and lightbox, but without success...
Any ideas what is going wrong? Maybe I'm using the wrong selector?

http://butchtailors.....men/summer-2012.aspx

Fin on Dec 10, 2012 10:50 AM

Hi, this looks great, but I when I test it, there is a blank page that just says: $("#img_03").imageLens({ imageSrc: "panos.jpg" });
I think it has something to do with referencing my image. any tips?

Kamil on Jan 28, 2013 04:47 AM

Bardzo fajna sprawa ,chyba wykorzystam to w swoim serwisie.

Phil on Feb 7, 2013 06:03 AM

Hi,

under which licence the software is distributed?
I want to fork it to a public rep on github to adapt it to my needs.

Thanks and regards, Phil

ilovegene on Feb 7, 2013 11:36 PM

thank you very much!!

Phil on Feb 9, 2013 03:50 AM

I assumed CC 3.0 as referenced in the footer of this page. And pushed it to github:
https://github.com/philister/imageLens

Flo on Mar 18, 2013 05:30 PM

Hey Guys!
There is a problem on this plugin if anything on the page is using relative position.
Just wanted to say that what Conrad suggested works, but there is one issue in using offset.left and offset.top over there, that is Chrome will fail to grab it. Also if you resize the browser width you`re screwed.

The sollution for this issues would be just to recalculate the offset everytime. Alternatively if it doesn`t bother you that it won`t work properly on browser resize, you could just set a timeout for the script.

Here is the sollution i am using (without timeout)
/*
https://www.dailycoding.com/
*/
(function ($) {
$.fn.imageLens = function (options) {
var defaults = {
lensSize: 100,
borderSize: 4,
borderColor: "#888"
};
options = $.extend(defaults, options);

var lensStyle = "background-position: 0px 0px;width: " + options.lensSize + "px;height: " + options.lensSize
+ "px;float: left;display: none;border-radius: " + options.lensSize / 2 + options.borderSize
+ "px;border: " + options.borderSize + "px solid " + options.borderColor
+ ";background-repeat: no-repeat;position: absolute;";

return this.each(function () {
var obj = $(this),
parent = obj.parent(),
// offset = obj.offset(),
imageSrc = options.imageSrc || $(this).attr("src"),
// Creating lensStyle
target = $('<div style="' + lensStyle + '"> </div>').appendTo(parent).addClass(options.lensCss).css({ backgroundImage: "url('" + imageSrc + "')" }),
widthRatio = 0,
heightRatio = 0,
tempImage = "<img style='display:none;' src='" + imageSrc + "' />",
setPosition = function ( e ) {
offset = obj.offset();

var leftPos = e.pageX - offset.left,
topPos = e.pageY - offset.top;

if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {
target.hide();
} else {
target.show();

leftPos = -((e.pageX - offset.left) * widthRatio - target.width() / 2);
topPos = -((e.pageY - offset.top) * heightRatio - target.height() / 2);
target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' });

leftPos = String((e.pageX - offset.left) - target.width() / 2);
topPos = String((e.pageY - offset.top) - target.height() / 2);
target.css({ left: leftPos + 'px', top: topPos + 'px' });

}
};

// Calculating actual size of image
$(tempImage).load(function () {
widthRatio = $(this).width() / obj.width();
heightRatio = $(this).height() / obj.height();
$(this).remove();
}).appendTo(parent);


target.add(obj).mousemove(setPosition);


});
};
})(jQuery);

non developers: just use the script above and wrap your image in a div that is set to position relative. Careful if you have CSS text-align to center the image, won`t work. Just go text-align left and use manual margin-left.

Bryan on Apr 19, 2013 08:34 AM

I had an issue with positioning due to a parent div having a relative positioning so I had to edit these lines:

leftPos = String(e.pageX - target.width() / 2)-jQuery('#parent-div').offset().left;
topPos = String(e.pageY - target.height() / 2)-jQuery('#parent-div').offset().top;

Lekhesh on May 7, 2013 10:22 PM

hi bro..
absolutely amazing effect and great response time..

i used this.. and its working absolutely fine... but i want to use this effect also and use onclick on the image also...

effect working fine... but onclick not working..

plz help.

Oberdan on May 10, 2013 09:30 AM

Great plugin, thank you very much

Mandy on May 29, 2013 10:09 PM

I just want to thank Sergey, Conrad, "Thanks" & Flo for continuing to contribute to this code and Phil for starting a repo on Github (https://github.com/philister/imageLens). I have to say, having to copy/paste and reformat the code people are writing in here has been frustrating. It's *so close* to being a great plugin (vs. all of the ones that make it look like a tacky magnifying glass).

Wish the author/admin would come back and modify the code with the updates/link to the repo or just add the ability for comments to contain code snippets, though. Seems like the site is dead :/

Syed on Jun 30, 2013 03:02 AM

will it works with wordpress? if yes, how to integrate with and use it with ease.

Dante on Jul 3, 2013 09:31 AM

Amazing plug-in, works great for browsers in computers, but it doesn´t work for mobile browsers, any solution for that?

Giulia on Jul 17, 2013 02:55 PM

I'm not sure why, but don't work well in my FireFox 3.6 or Safari...

Albert on Jul 29, 2013 08:10 AM

You think there could be a update to make it work on tablets and smartphones? Basicly needs to use the touch event instead of mouseRollOver.

Help would be Very much appreciated.

Buddywa on Aug 20, 2013 12:40 PM

For the problem of moving the mouse to fast I modified the code to append an hover() command to a chosen parent element. When the visitor hovers over the parent element it will trigger target.hide();
I added a variable to the .imageLens() function so the user can define what parent element they want the hover command:
$("#zoomable").imageLens({parentElement:".parentElement"});
If the user does not define a parent element my change will be disabled.
Also for some reason I felt inclined to set a var active = 0. I did this so if the target is already hidden and the visitor is hovering over parentElement the JS wont be consistently executing target.hide();


/*
https://www.dailycoding.com/
$("#zoomable").imageLens({parentElement:"setElement"});
*/
(function ($) {
$.fn.imageLens = function (options) {

var defaults = {
lensSize: 100,
borderSize: 4,
borderColor: "#888",
parentElement: ""
};
var options = $.extend(defaults, options);
var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize)
+ "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize)
+ "px;border: " + String(options.borderSize) + "px solid " + options.borderColor
+ ";background-repeat: no-repeat;position: absolute;";

return this.each(function () {
obj = $(this);

var offset = $(this).offset();
var active = 0;

// Creating lens
var target = $("<div style='" + lensStyle + "' class='" + options.lensCss + "'> </div>").appendTo($(this).parent());
var targetSize = target.size();

// Calculating actual size of image
var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");
var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";

var widthRatio = 0;
var heightRatio = 0;

$(imageTag).load(function () {
widthRatio = $(this).width() / obj.width();
heightRatio = $(this).height() / obj.height();
}).appendTo($(this).parent());

target.css({ backgroundImage: "url('" + imageSrc + "')" });

target.mousemove(setPosition);
$(this).mousemove(setPosition);
if (options.parentElement != "")
{
$(options.parentElement).mouseover(function() {
if (active == 1)
{
target.hide();
active = 0;
}
});
}

function setPosition(e) {

var leftPos = parseInt(e.pageX - offset.left);
var topPos = parseInt(e.pageY - offset.top);
if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {
active = 0;
target.hide();
}
else {
active = 1;
target.show();

leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * (-1));
topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * (-1));
target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' });

leftPos = String(e.pageX - target.width() / 2);
topPos = String(e.pageY - target.height() / 2);
target.css({ left: leftPos + 'px', top: topPos + 'px' });
}
}
});
};
})(jQuery);

Buddywa on Aug 20, 2013 05:08 PM

It turns out that my post above is poorly tested. It only really works good in Chrome.
I had to add a setTimeout command to wait until it hides so if the user continues to move it wont hide.
However I am not going to bother re-post the code because I am sure I'll find another bug later.

cc on Sep 22, 2013 06:55 AM

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="KapShop.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery.imageLens.js">
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#img_01").imageLens();
});
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<img id="img_01" src="Images/belt1.jpg" width="200" height="100" />

</div>
</form>
</body>
</html>
i can not use this plugin with this.can someone help me.Thanks!

Meret on Oct 23, 2013 04:36 AM

hi. thanks for the plugin.
i have an littel problem:
here:
http://preview.gluecksgefuehl.ch/kissen.html
why ist the zoom not a the same place as the cursor?
thanks for helping!

cecilhope on Mar 19, 2014 07:33 PM

It is easy to zoom image with an advanced image processing library like this:
http://www.rasteredg..../imaging-processing/

Simon on Apr 3, 2014 09:40 PM

How would I implement this into Opencart? rather than specifying a single image and to use it on all the products? Opencart uses JQuery and know where to put the file and script info, but how do I use this effect as standard for all the pics?

Kav on Apr 11, 2014 10:57 AM

The best!

Ruben on Jul 21, 2014 01:01 PM

I want to know if is possible to use the plugin inside a jquery modal

Alex on Nov 5, 2014 03:26 AM

Good day!
The script works, but there is a problem:
contour trace remains of a magnifying glass, as shown in the following example:
http://trustandquality.ru/rice_copy2

Tell me what's the problem?

Sachin on Mar 10, 2015 09:41 PM

Hi,
I need ur help to extend this plugin for my requirement. i can pay for it.

Thanks

Bareera Salman on Mar 19, 2015 12:15 PM

Cool collection of WP plugin for image effects! It inspires me more. And also, this showcase will be more fantastic if you could include some free plugins.Thanks!

Sam on Apr 15, 2015 03:26 AM

@Alex
Hi, I'm been able to implement but I got the same issue: I've got one img that display several image via a "next" button. The contour trace doesn't have an issue for the first image but after reloading another image, it shows. Did you or someone else run into this issue and solved it ?
I'm quite a newbie in js...
Thanks

Gaby on Jun 10, 2015 06:01 AM

Hello,
I had some issues to make this wonderful plugin working.
Somehow the ratio was wrong. Here is the fix to get it right :
var t = new Image();
t.src = imageSrc;
widthRatio = t.width / obj.width();
heightRatio = t.height / obj.height();

Namrata on Jul 23, 2015 03:06 AM

Can anyone tell me how to get sqaure magnify ?

mahesh on Jul 28, 2015 10:39 PM

thank you very very much

phuong on Aug 6, 2015 12:29 AM

I'd rather display the image after magnifying glass. I have made orders
  $ ("# Img_03") .imageLens ({imageSrc: "sample01.jpg"});
  but has not been. The reason is because where?

Vlad on Aug 13, 2015 06:34 AM

You need to change string vis obj variable init to use obj in local namespace.

var obj = $(this);

Now it looks like
obj = $(this), and function trying to use global var which can be used already in document with another script.

Great work, simple and perfect.

JS on Nov 25, 2015 05:28 AM

I love this plugin!

Amit on Mar 6, 2016 11:59 PM

can we change the lense from circle to rectangle

Alex on Mar 7, 2016 01:16 PM

Very very useful , thanks

emoline-laminatparke on May 22, 2016 11:12 PM

good job, we try to make it on our site.

Emoline Laminat Parke on May 22, 2016 11:25 PM

good job for laminat parke.

Laminat Parke on Jul 11, 2016 06:56 AM

it is useful. Thank you. Laminat Parke.

szerszun on Mar 13, 2017 11:01 AM

wow szery szery lejdi

szerszun on Mar 13, 2017 11:01 AM

wow szery szery lejdi

Maria on Jul 25, 2017 12:56 AM

Take into account that it doesn't work with the current version of jquery

Maria on Jul 25, 2017 12:56 AM

Take into account that it doesn't work with the current version of jquery

szy on Jul 25, 2017 12:58 AM

Take into account that it doesn't work with the current version of jquery

Jorge on Sep 1, 2017 11:40 AM

I-LOVE-YOU
Thank you.

Cain on Nov 15, 2017 01:42 AM

@Andreas
How to adjust magnification of pictures with high resolution?
Waiting online, thx!