- 5 different zoom types
- Optional overlay support
- Supports HTML captions
- Simple clean & valid markup
- Loads of settings to tweak
- Packed version only weighs 4kb
- Free to use and abuse under the MIT license
Nivo Zoom has been tested under the following browsers:
- Internet Explorer v7+
- Firefox v3+
- Google Chrome v4
- Safari v4
To use Nivo Zoom you have to include jQuery, the Nivo Zoom script and the Nivo Zoom CSS on your page:
Next you need to add some HTML. The way Nivo Zoom works is you to wrap a thumbnail image in a link pointing to the image that you want to "zoom" in to and give this link the class "nivoZoom".
<a href="images/pic_large.jpg" class="nivoZoom"> <img src="images/pic.jpg" alt="" /> </a>
On top of this you can add extra classes to the link to get the image to zoom in a different way. You can also add a caption to the zoomed image by adding a div with the class "nivoCaption".
<a href="images/pic_large.jpg" class="nivoZoom center"> <img src="images/pic.jpg" alt="" /> <div class="nivoCaption">This is an example of a caption.</div> </a>
To get the image to zoom a different way add one of the following classes to the link:
- topLeft (default)
Finally you need to hook up your script using the
Note that you can change the context of zoomed images by attaching the nivoZoom function to different elements.
Nivo Zoom has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults:
These rules are optional but are recommended to make Nivo Zoom look totally rad when you use it.
Style the Link not the Image
When formatting your images (for example floating them left or right) please remember to style the link and not the image (i.e. the link with the "nivoZoom" class). This will stop strange things happening when you zoom the image.
Style Your Zoom Like the One On This Site
You are expected to provide your own styles for Nivo Zoom. However for your benefit I have created a "style-pack" with the styles and images used for the zoom on this page.
Click here to download.
v1.0 - Initial Version.
If you enjoy this stuff and want more you can help me out by sharing this page or donating me some money. Why not buy me a beer?
Please select a version of Nivo Zoom to download:
Download Currently v1.0