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

Advanced

Zoom into a high resolution image

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.

Multiple instances

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({
  // ...
})

Define zoomable image(s) programmatically

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

Development

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

yarn && yarn watch

Test

yarn test

Credit

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