This repository is a mirror of the component module bmcmahen/image-zoom. It has been modified to work with NPM+Browserify. You can install it using the command npm install npmcomponent/bmcmahen-image-zoom
. Please do not open issues or send pull requests against this repo. If you have issues with this repo, report it to npmcomponent.
Take a thumbnail, and zoom it to fit the screen. It uses transforms for buttery smoothness, but should still work on older browsers. Demo here
$ component install bmcmahen/image-zoom
or use the standalone version in standalone
, with the global variable imagezoom
.
You can use markup (much like Bootstrap) for initiating zoom on certain elements.
<img class='thumb' src='inst6.jpg' data-zoom-padding='20' data-zoom-url='inst6.jpg' data-zoom-overlay='true'>
<script>
var zoom = require('image-zoom');
</script>
Or you can use the javascript API, like in the example below.
<img class='thumb' src='inst6.jpg'>
<script>
var zoom = require('image-zoom');
var thumb = document.querySelector('img');
var zoomer = zoom(thumb, 'inst6.jpg')
.overlay() // enable overlay
.padding(20); // enable padding of 20. defaults to 0
</script>
Zoom in.
Zoom out.
Enable the overlay when zooming into the image.
Set the padding of the zoomed image.
hidden
var zoom = require('image-zoom');
var z = zoom(document.querySelector('img'), 'inst6.jpg');
z.on('shown', function(){
// our element is zoomed in
});
MIT