BeZoom Lighweight JQuery Zoom Plugin

By on 20. Juli 2009. Posted in . Tagged as , , .

BeZoom is a simple and lightweight zoom plugin for the wonderful JQuery framework.

Update / Changelog

2012.09.28 v0.5

  • added some styles to the generated elements in order to override styles, that prevent BeZoom from working
  • added option to remove title
  • added minified version

2009.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.5 as rar

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
showTitle false show Title with zoomed image

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.

15 Comments

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

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

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

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

  5. 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).

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

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

  8. I have used bezoom in a classified ads module that I write for the Xoops CMS. I like the way it works. Just wanted to let you know I am using it.

    Thanks,

    John

  9. 14 jQuery Plugins for Working with Images « My Blog

  10. I have converted your wonderful script to work with JS Prototype and created a Magento Product Image Display plugin for that:
    http://en.e-abi.ee/bezoom-prototype-plugin-for-magento.html

    If original author wants to have that script, then he can simply download it or I can send it to him on request.

    Usage of the script would be similar to the one stated here:

    new Eabi_Bezoom($$('.eabi_bezoom'), options);
    

    Where $$(‘eabi_bezoom) is simply CSS selector of elements to apply the Zoom on.

    If anyone wants similar script but meant for prototype, then here it is:
    http://en.e-abi.ee/bezoom-prototype-plugin-for-magento.html

  11. Lista de Plugins jQuery « desarrollophpsenior

  12. Fantastic and plugin! Thank you for your work.

    For those wondering how to “lock” the zoom image when clicked, I made some quick modifications to make that possible.

    First, add a variable to track mouse clicks (for locking):
    ——————————–
    (function($) {
    $.fn.bezoom = function(options){
    // Lamoni Finlayson – Modification for “locking” on click
    var hasClicked = false;

    // default settings
    var settings = {
    ——————————–

    Then add the following “if” statement at the beginning of the .mouseenter, .mouseleave, and .mousemove functions:

    if (hasClicked) return;

    After doing that, you should be able to “lock” the zoom image with a click and then “unlock” it with another click.

Leave a Comment

Your email address will not be published. Required fields are marked with *.