Skip to content
Simple JavaScript image zoomer
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.nojekyll
LICENSE
README.markdown
example.html
imgzoom.js
imgzoom.litcoffee

README.markdown

This project is considered stable

imgzoom is a simple image zoomer. It will animate images to the maximum allowable size by the viewport, but will never make them larger than the image's actual size.

Demo.

This is a simple alternative to "lightbox" and such. This script has no external dependencies and should work well with pretty much any browser (including IE11, but not older versions).

Basic usage:

<img src="http://example.com/image.jpg" style="width: 300px">

or:

<img src="http://example.com/thumbnail.jpg" data-large="http://example.com/fullsize.jpg">

Then bind to the click event with e.g.

window.addEventListener('load', function() {
	var img = document.querySelectorAll('img');
	for (var i=0; i<img.length; i++) {
		img[i].addEventListener('click', function(e) { imgzoom(this); }, false);
	}
}, false);

With jQuery it's even easier:

$(document).ready(function() {
	$('img').on('click', function(e) { imgzoom(this); });
})

For best results you probably want to add a wee bit of styling:

	img.imgzoom-loading {
		cursor: wait !important;
	}

	.imgzoom-large {
		cursor: pointer;
		box-shadow: 0 0 8px rgba(0, 0, 0, .3);

		/* Simple animation */
		transition: all .4s;
	}

This is a simplified version of bluerail/picture_zoomer, which I wrote a few years ago.

You can’t perform that action at this time.