Description

Zoomer is a Prototype.js extension for displaying a bigger version of an image in the same occupied space. It's ideal for product showcases, where close-up details are important (bikes, clothing, etc).

Features

• Lightweight: 1.6 KB minified
• Cross-browser: Tested on Internet Explorer 6/7/8, Firefox 2/3, Google Chrome, Opera 9.64
• Gracefully degrading: Falls back to regular image-link when JavaScript is not available

Example

You can test the extension on this page

Requirements

Zoomer.js needs the Prototype.js JavaScript framework to work

Usage

• Download zoomer.js or zoomer-min.js
• Include the script in your page, after the Prototype library:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="zoomer.js"></script>

• Your HTML code should look like this:

<a href="/path/to/large/image.jpg" id="linkID"><img src="/path/to/small/image.jpg" /></a>

• Initialize Zoomer by passing the element either by id or as Prototype Element:

new Zoomer('linkID');

• If you want to automatically use all your anchors with rel="zoomer":

$$('a[rel="zoomer"]').each(function (a) {
    new Zoomer(a);
});

Available options

There are some options available to help interact with Zoomer easily. The options are passed after the element, as JavaScript hash:

new Zoomer(element, {optionA: value, optionB: value}

• trigger: if you want to also trigger the zoom in/out when the user clicks on some other element, pass it to the initialization (as id or Element)
• afterZoomIn / afterZoomOut: functions that you can define and will be called when the user zooms in / out:

new Zoomer(element, {
    afterZoomIn: function () {
        alert("Zoomed in");
    },
    afterZoomOut: function () {
        alert("Zoomed out");
    }
});