ImageLens – A jQuery plug-in for Lens Effect Image Zooming

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

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

Square lens in Firefox 3.6.

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

This is Awesome. Thanks for sharing.

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.

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

Hello,

that is a nice effect.

thank you!

Karsten from germany

@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.

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

Could this be used in wordpress?

@Andy, yes its javascript ;)

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

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

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

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!

Sorry, Ramesh not Andreas :)

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?

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.

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)

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.

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

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

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

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

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

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

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

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.

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

cvbcvb

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

@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.

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

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

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

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

????

a very good work thanks...

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!

@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

@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.

@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.

Awesome! Thank you :)

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

That 's greate javascript effect ! I like it !

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

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

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

good job. Thanks

Thanks, work great.

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

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.

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

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

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.

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.

Hi guys,

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

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!

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.

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

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.

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();

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,

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?

Leave a Comment