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
![](images/nasa-bw-1.jpg)
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
![](images/nasa-bw-2.jpg)
![](images/nasa-bw-1.jpg)
![](images/nasa-bw-3.jpg)
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>
Demo
![](images/space.jpg)
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>