Nivo Zoom

Jump to Download ↓

Ads by Yoggrt

Current Features

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

Browser Support

Nivo Zoom has been tested under the following browsers:

Internet Explorer v7+
Firefox v3+
Google Chrome v4
Safari v4

Usage

To use Nivo Zoom you have to include jQuery, the Nivo Zoom script and the Nivo Zoom CSS on your page:

<link rel="stylesheet" href="nivo-zoom.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.zoom.pack.js" type="text/javascript"></script>

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)
topRight
bottomLeft
bottomRight
center

Finally you need to hook up your script using the $(window).load() function:

<script type="text/javascript">
$(window).load(function() {
	$('body').nivoZoom();
});
</script>

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:

<script type="text/javascript">
$(window).load(function() {
	$('body').nivoZoom({
		speed:500,
		zoomHoverOpacity:0.8,
		overlay:false,
		overlayColor:'#333',
		overlayOpacity:0.5,
		captionOpacity:0.8
	});
});
</script>

Optional Enhancement

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.

Changelog

v1.0 - Initial Version.

Support

If you have any questions you can email me at gilbert@dev7studios.com or hit me up on twitter at @gilbitron. No promises I can help or even reply but I'll do my best.

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?

Download

Please select a version of Nivo Zoom to download:

Download Currently v1.0