Skip to content
Simple JavaScript image zoomer
CoffeeScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.nojekyll Fix example Feb 20, 2019
LICENSE Genesis Aug 10, 2017
README.markdown Better README Aug 2, 2019
example.html Fix example after account rename May 18, 2019
imgzoom.js Clear {max,min}-{width,height} May 23, 2019
imgzoom.litcoffee Clear {max,min}-{width,height} May 23, 2019


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.


This is a simpler (and IMHO, better) alternative to "lightbox" scripts. 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="" style="width: 300px">


<img src="" data-large="">

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() { imgzoom(this); }, false);
}, false);

With jQuery it's even easier:

$(document).ready(function() {
    $('img').on('click', function() { 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.