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 :

Demo's

Text link

Click me!

Thumbnails

Set of photos

Overlay

Venice

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

* Cannot be used with initImageZoom()

Functions