Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

This project is considered stable

imgzoom is an 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. Images are zoomed only if the larger version is actually larger than the original.

This is a good alternative to "lightbox" and such for many cases. It's snappy, simple, and looks nice.

Some example usages:

There are no external dependencies and should work well with pretty much any browser (including IE11, mobile, etc.)

It's a small library: 4.4k (1.9k gzip'd). If you really want to save bytes you can minify it to 2.4k (978 bytes gzip'd).

window.imgzoom will be exported when loaded via a <script> tag, or you can use import imgzoom from 'imgzoom' from WebPack etc. It's on npm and unpkg.


Basic usage:

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

The src attribute is automatically used; images will only be zoomed if the zoomed version is actually larger.

Use data-large to specify a different larger image:

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

Then bind to the click event with something like:

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

With jQuery it's even easier:

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

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); }
@media not (prefers-reduced-motion: reduce) {
    .imgzoom-large  { transition: all .4s; }
}

And that's it!

About

JavaScript image zoomer

Topics

Resources

License

Releases

No releases published

Packages

No packages published