MooLabs by BertRamakers > ImageZoom - Free open-source Mootools scripts

Projects > ImageZoom

ImageZoom is based on LightBox JS, and is perfect for photo galleries.
It can display large images on top of a page, and has the ability to group multiple photos in one set.

However, there are numerous advantages to use ImageZoom instead of LightBox :

Images can be dragged around.
Multiple images can be open at the same time.
Visitors can still access the underlying content of the page.
It's easier for visitors to find the navigation buttons.
The code is easy to modify.
ImageZoom is compatible with LightBox.

Demo's

Text link

Click me!

Thumbnails

Set of photos

Overlay

Usage

Setup

Before you start, insert the following code in your <head>-tag :

<script type="text/javascript" src="imagezoom/imagezoom.js"></script>
<link type="text/css" href="imagezoom/imagezoom.css" rel="stylesheet" />

Simple usage

First of all, you'll need to have some links that point to an image and have the word "imagezoom" in their rel attribute.

<a href="images/demo.jpg" rel="imagezoom" title="photo caption">Text</a>
<a href="images/demo.jpg" rel="imagezoom" title="photo caption">
	<img src="images/thumbnail.jpg" />
</a>

Now, add the following javascript code to the <head>-tag of your page to start ImageZoom :

window.addEvent("domready", function() {
	initImageZoom();
});

Et voila, you are finished.
All links with "imagezoom" in their rel will now open a nice ImageZoom box when someone clicks on them.

Photo sets

To put multiple photos in one set/collection, you need to put the set's name between square brackets after the "imagezoom" :

<a href="images/demo.jpg" rel="imagezoom[collection_name]">Text</a>
<a href="images/demo.jpg" rel="imagezoom[collection_name]">
	<img src="images/thumbnail.jpg" />
</a>

Lightbox compatibility

If you have used Lightbox in the past and you don't want to update all your links to change "lightbox" to "imagezoom",
you can use the following code instead. (You can change the rel to anything you want, actually)

window.addEvent("domready", function() {
	initImageZoom({rel: 'lightbox'});
});

Advanced

Add ImageZoom on the go

If you would like to make certain links/buttons/etc. open an ImageZoom box after the initial page load,
you can use the following (JavaScript) code as a template :

var myElement = $('myElement');
myElement.addEvent("click", function() {
	var imagezoom = new Imagezoom({
		image: 'images/demo.jpg',
		startElement: myElement,
		rel: 'imagezoom' // or 'lightbox'
	});
	imagezoom.show();
});

Modifications

Object

var instance = new Imagezoom({
	// options
});

Options

image: url of the image. *
caption: caption text. *
showCaptionBar: true/false. If true, the caption bar will be immediatly visible (if there is a caption or next/previous button). (Defaults to true)
startElement: element from where the image should open and move to the center.
x: if you don't specify a startElement, you can specify the x-position from where the zooming should start. (In pixels)
y: same as x, but for the y-position.
initWidth: if you don't specify a startElement, you can specify the initial width for the ImageZoom box. (In pixels)
initHeight: same as initWidth, but for the initial height.
draggable: true/false. If true, the image can be moved around.
loadImage: url for the load animation.
loadDelay: minimum time to show the load animation. (In milliseconds. Defaults to 150)
duration: duration of the zooming animation. (In milliseconds. Defaults to 800)
transition: Mootools Fx transition for the zooming animation. (Defaults to Fx.Transitions.Cubic.easeOut)
startOpacity: initial opacity of the ImageZoom box. (Ranging from 0 - 1. Defaults to 0.6)
closeText: alternative text for the close button. (Defaults to "Close")
rel: the rel text you want to use to identify ImageZoom links. (Important for photo sets. Defaults to imagezoom)
overlay: true/false. Displays overlay over the page if true. (Defaults to false)
overlayColor: backgroundcolor of the overlay. (Defaults to #000)
overlayOpacity: opacity of the overlay. (Defaults to .75)

* Cannot be used with initImageZoom()

Functions

instance.show(): opens an ImageZoom instance.
instance.preloadImage(): preloads the image of an ImageZoom instance. (For faster loading)
instance.close(): closes an ImageZoom instance.