Juli 20th, 2009 | |
Posted in Coding
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
Download BeZoom v0.11 as zip
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
-
Option
Default Value
Description
-
marginLeft
10
left side margin
-
identifier
bezoom
id that is used internally for the bezoom plugin; should not need to be changed as long as you don’t use an “bezoom”-id on your own page
-
height
200
height of preview-container; height of title-container doesn’t count
-
width
200
width of preview-container
-
titleSource
title
Attribute that contains the title
-
imgSource
href
Attribute that contains the url of the preview-image
-
bgColor
#5398EE
background-color of title
-
color
#ffffff
font-color of title
-
size
0.8em
font-size of title; you can also use px instead of em
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.
Tags:
jquery,
plugin,
zoom