https://github.com/bmcmahen/image-zoom
smooth, iOS/medium.com style thumbnail viewing
https://github.com/bmcmahen/image-zoom
image-zoom images javascript thumbnails
Last synced: about 1 year ago
JSON representation
smooth, iOS/medium.com style thumbnail viewing
- Host: GitHub
- URL: https://github.com/bmcmahen/image-zoom
- Owner: bmcmahen
- Created: 2013-10-09T04:12:56.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2017-05-05T20:32:14.000Z (about 9 years ago)
- Last Synced: 2024-11-01T12:36:43.311Z (over 1 year ago)
- Topics: image-zoom, images, javascript, thumbnails
- Language: JavaScript
- Homepage: http://bmcmahen.github.io/image-zoom
- Size: 509 KB
- Stars: 37
- Watchers: 4
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: Readme.md
- Changelog: History.md
Awesome Lists containing this project
README
# image-zoom
Zoom an image to full-screen, as seen on Medium.com. It uses transforms for buttery smoothness, but should still work on older browsers given polyfills for classList & bind. [Demo here](http://bmcmahen.github.io/image-zoom).
Using React? Try [react-thumbnail-zoom](https://github.com/bmcmahen/react-thumbnail-zoom) instead.
## Installation
Install using [Duo](http://github.com/duojs/duo) or NPM for use with browserify.
```
$ npm install image-zoom
```
```
var Zoom = require('bmcmahen/image-zoom');
```
or use the standalone build in `dist` using the global `Imagezoom`.
## API
You can use markup (much like Bootstrap) for initiating zoom on certain elements.
```html
```
Or you can use the javascript API, like in the example below.
```html
var ImageZoom = require('image-zoom');
var img = document.querySelector('img');
var zoom = new Imagezoom(img).overlay().padding(350);
img.onclick = function(e){
// stop propagation if we want to retain our HTML api
// in other parts of the site.
e.stopPropagation();
zoom2.show();
};
// unbind our delegate listener if we aren't
// using the HTML api.
zoom.stopListening();
```
### .show()
Zoom in.
### .hide()
Zoom out.
### .overlay()
Enable the overlay when zooming into the image.
### .padding(num)
Set the padding of the zoomed image.
### .use(plugin)
Use a plugin.
## Events
### showing
### shown
### hiding
### hidden
### cancel
```javascript
var zoom = require('image-zoom');
var z = zoom(document.querySelector('img'));
z.on('shown', function(){
// our element is zoomed in
});
```
## License
MIT