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

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.