Skip to content

Commit

Permalink
Better README
Browse files Browse the repository at this point in the history
  • Loading branch information
arp242 committed Aug 2, 2019
1 parent 30c8a82 commit fa757ca
Showing 1 changed file with 25 additions and 25 deletions.
50 changes: 25 additions & 25 deletions README.markdown
@@ -1,51 +1,51 @@
[![This project is considered stable](https://img.shields.io/badge/Status-stable-green.svg)](https://arp242.net/status/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.
allowable size by the viewport, but will never make them larger than the image's
actual size.

[Demo](https://arp242.github.io/imgzoom/example.html).

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).
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="http://example.com/image.jpg" style="width: 300px">
<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">
<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);
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(e) { imgzoom(this); });
})
$(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;
}
img.imgzoom-loading {
cursor: wait !important;
}

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

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


This is a simplified version of
Expand Down

0 comments on commit fa757ca

Please sign in to comment.