BeZoom Lighweight JQuery Zoom Plugin
BeZoom is a simple and lightweight zoom plugin for the wonderful JQuery framework.
Update / Changelog
09.07.29 v0.11
- fixed overlow:hidden bug in IE6 & 7 when container has position:absolute;
- changed method to calculate relative mouse position to work in IE
- chaining of mouseenter, mouseleave and mousemove didn’t work in IE
- Plugin now works in Opera >= 9, Firefox >= 2, IE >= 7 & Chrome
Demo
To view this script in action simply hover of the following image:
Download
Usage
$(document).ready(function(){
$(".zoom").bezoom();
});
HTML
The plugins works best with images with the same proportions.
<a href="img_big.jpg" class="zoom" title="Your Title">
<img src="img_small.jpg">
</a>
Options
It’s not neccessary to link directly to the big image. You can also you the rel-Attribute for the preview-image or any other attribute.
$(document).ready(function(){
var options = {imgSource = 'rel'};
$(".zoom").bezoom();
});
<a href="some_page.html" rel="img_big.jpg" class="zoom" title="Your Title">
<img src="img_small.jpg">
</a>
Options Overview
Alternatives
With jqzoom there is a well known alternative to BeZoom, I used some time. But jqzoom in my opinion is much to complicated and confusing. Changing something in this 1000 liner isn’t fun at all. After all jqzoom seems to be a mashup of prototip and lightview.
So I created BeZoom to suit my personal needs. It’s light and it’s easy to use.
If you are using BeZoom let me know it and I’m going to develop some more features for it. If you find any bugs I’d appreciate a short comment so I can fix it.
ähnliche Postings
September 4th, 2009 at 09:14
you are right, jqzoom is giving big headaches.
I like your plugin, it’s nice. I’d love to see an internal zoom feature, like magic zoom has.
Keep up the good work
Mar
Oktober 3rd, 2009 at 19:36
Do you know if it’s possible to use Bezoom with multiple images?
Oktober 5th, 2009 at 11:15
Hi Simon!
What exactly do you mean with “multiple images”?
Of course it’s possible to use bezoom on a page with more than one image. I’m using it on my project for the search results: http://ufashion.de/shop/pimkie/
Oktober 16th, 2009 at 22:58
It would be nice to have an option that’d leave the zoomed image there – for my purposes, the zoomed image won’t be covering anything up, so it’s just as well for it to stick around.
Should be trivial to add.
Also, thanks very much for all your work and for making this available. I really appreciate it.
Oktober 16th, 2009 at 23:25
In addition to the “leave around” feature (or, as a complement to it), I think it’d also be good to have a “click” handler that “freezes” the zoomed image. That way, I can pan around the image, get it to the position I want, then click to freeze it. Then, I can move the mouse elsewhere on the page and refer back to the zoomed image at my leisure.
This is a great piece of code – thanks again.
Oktober 17th, 2009 at 18:40
Just noticed that what I did to get the zoom window to work in a jQuery ui dialog (well it’s not exactly one of those, but similar) doesn’t work in IE7, probably due to some positioning brain damage.
Oktober 17th, 2009 at 19:02
I notice that the vertical position of the zoom window in your example (on this page) is in a different place than it is when I view with Firefox. It seems that the calculation of vertical position is different for IE (IE7 that is; I think IE8 is better-behaved).
Oktober 18th, 2009 at 05:35
Hi Benjamin,
Thanks for doing this! I had also created a plugin out of frustration to jqZoom. However, mine was dragging/lagging – I think due to the fact that I had my calculations in a separate function.
I’ve noticed that your plugin fails when the image is placed in a floating parent. So, I’ll work on a fix for that and I’ll come back with an update. Unless someone else beats me to the punch!
Thanks again for the very clean plugin. Love it.
November 6th, 2009 at 00:49
Great plugin, definitely a lot lighter than jqzoom. I think I may have the same question as Simon, but I have a little more information. Is there a way to have the image href or rel be dynamic? I have multiple thumbnails on a page. When clicked they swap out a larger image. The larger image is able to be “zoomed” and I would like the link to the zoom to be updated whenever the large image is swapped out.
Thanks,
Matt