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.