Image zoom that makes sense. Demo
- Pure JavaScript & built with mobile in mind.
- Smooth animations with intuitive gestures.
- Zoom into a hi-res image if supplied.
- Easy to integrate & customizable.
This library is available through:
- cdnjs
- Package manager:
yarn add zooming
npm install zooming --save
bower install zooming --save
- Download source
To integrate with your web app:
<script src="build/zooming.min.js"></script>
// via Browserify
var Zooming = require('zooming')
// via ES6 syntax
import Zooming from 'zooming'
At this point, any image with attribute data-action="zoom"
is zoomable by default, for example:
<img src="img/journey.jpg" data-action="zoom" />
Option 1: Add data-original
attribute to the image:
<img src="img/journey_thumbnail.jpg" data-action="zoom" data-original="img/journey.jpg" />
Option 2: Provide an original image link that wraps around the image:
<a href="demo/img/journey.jpg">
<img src="demo/img/journey_thumbnail.jpg" data-action="zoom" />
</a>
Notice that if both are provided, it takes the data-original
value as hi-res image source.
You can create multiple Zooming instances, each with its own configuration:
var zooming = new Zooming({
// optional configuration here
})
// or just change the options later
zooming.config({
// ...
})
// by a css selector
zooming.listen('.img-zoomable')
// by an Element
var img = document.getElementByID('img-zoomable')
zooming.listen(img)
For all supported APIs and options, see Documentation.
Install yarn if haven't already. Fork and clone it. Under project folder:
yarn && yarn watch
yarn test
Inspired by zoom.js and zoomerang. First demo image from Journey. Second demo image journey by 飴村.