Zoomer Demo

View Documentation

Basic

Create a new Zoomer by simply including an image inside the target wrapper. The target wrapper should have a predefined height and width as the new markup will fill all available space:

$(".viewer").zoomer();

.viewer { height: 500px; width: 500px; }

<div class="viewer">
    <img src="/path/to/image.jpg">
</div>

Demo

Gallery

Zoomer will auto detect multiple image and build a gallery:

$(".viewer").zoomer();

<div class="viewer">
    <img src="/path/to/image-1.jpg">
    <img src="/path/to/image-2.jpg">
    <img src="/path/to/image-3.jpg">
</div>

Demo

Advanced

Customize a specific Zoomer instance:

$(".viewer").zoomer({
	controls: {
		zoomIn: ".zoom_in",
		zoomOut: ".zoom_out"
	}
	customClass: "custom",
	increment: 0.03,
	interval: 0.1,
	marginMax: 50
});

<div class="viewer">
    <img src="/path/to/image.jpg">
</div>

Implicitly Linked

Unlinked

Tiled

Zoomer can also handle larger images that have been sliced into equal tiles. You must pass the tiles at initialization:

$(".viewer").zoomer({
    source: {
        thumbnail: "images/thumbnail.jpg",
        tiles: [
            ["images/01-01.jpg", "images/01-02.jpg", "images/01-03.jpg"],
            ["images/02-01.jpg", "images/02-02.jpg", "images/02-03.jpg"],
            ["images/03-01.jpg", "images/03-02.jpg", "images/03-03.jpg"]
        ]
    }
});

<div class="viewer">
    <-- Remains Empty --/>
</div>

Demo