munazo / zooming

Image zoom that makes sense.

Zooming

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.

Get started

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:

Option 1. Simply include a script

<script src="build/zooming.min.js"></script>

Option 2. Module loader

// 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" />

You can also define zoomable images in JavaScript:

// by a css selector
Zooming.listen('.img-zoomable')

// by an Element
var img = document.getElementByID('img-zoomable')
Zooming.listen(img)

Add data-original attribute to supply a hi-res image when zooming in:

<img src="img/journey_thumbnail.jpg" data-action="zoom" data-original="img/journey.jpg" />

Documentation

Development

Install yarn if haven't already. Fork and clone it. Under project folder:

yarn && yarn watch

Open up index.html and play around with it!

Test

Open up test.html for browser testing (keep your cursor away from the browser window).

Credit

Inspired by zoom.js and zoomerang. First demo image from Journey. Second demo image journey by 飴村.