Smooth Image Zooming As Seen On Medium.com – zooming.js

Preview:

Description:

zooming.js is a lightweight, dependency-free, mobile-friendly image zooming library inspired by Medium.com.

More features:

• Smooth transitions.
• Configurable background overlay.
• Also supports image panning.

How to use it:

1. Install & download the library.

# Yarn
$ yarn add zooming
# NPM
$ npm install zooming --save

2. Import the zooming.js.

import Zooming from 'zooming'

3. Or load the compiled JavaScript zooming.min.js in the document.

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

4. Attach the Zooming function to your images and done.

new Zooming().listen('img');

5. Zoom the image to a high resolution image.

<img src="thumbnail.jpg" 
     data-original="full.jpg" />
     
<!-- OR -->
<a href="full.jpg">
  <img src="thumbnail.jpg" />
</a>

6. Specify the width/height of the zoomed image.

<img src="sample.jpg" 
     data-zooming-width="400" 
     data-zooming-height="300" />

7. Possible options to customize the zooming library.

new Zooming({
    /**
     * To be able to grab and drag the image for extra zoom-in.
     * @type {boolean}
     */
    enableGrab: true,
    /**
     * Preload zoomable images.
     * @type {boolean}
     */
    preloadImage: false,
    /**
     * Close the zoomed image when browser window is resized.
     * @type {boolean}
     */
    closeOnWindowResize: true,
    /**
     * Transition duration in seconds.
     * @type {number}
     */
    transitionDuration: 0.4,
    /**
     * Transition timing function.
     * @type {string}
     */
    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0, 1)',
    /**
     * Overlay background color.
     * @type {string}
     */
    bgColor: 'rgb(255, 255, 255)',
    /**
     * Overlay background opacity.
     * @type {number}
     */
    bgOpacity: 1,
    /**
     * The base scale factor for zooming. By default scale to fit the window.
     * @type {number}
     */
    scaleBase: 1.0,
    /**
     * The additional scale factor when grabbing the image.
     * @type {number}
     */
    scaleExtra: 0.5,
    /**
     * How much scrolling it takes before closing out.
     * @type {number}
     */
    scrollThreshold: 40,
    /**
     * The z-index that the overlay will be added with.
     * @type {number}
     */
    zIndex: 998,
    /**
     * Scale (zoom in) to given width and height. Ignore scaleBase if set.
     * Alternatively, provide a percentage value relative to the original image size.
     * @type {Object|String}
     * @example
     * customSize: { width: 800, height: 400 }
     * customSize: 100%
     */
    customSize: null  
});

8. Callback functions.

new Zooming({
    /**
     * A callback function that will be called when a target is opened and
     * transition has ended. It will get the target element as the argument.
     * @type {Function}
     */
    onOpen: noop,
    /**
     * Same as above, except fired when closed.
     * @type {Function}
     */
    onClose: noop,
    /**
     * Same as above, except fired when grabbed.
     * @type {Function}
     */
    onGrab: noop,
    /**
     * Same as above, except fired when moved.
     * @type {Function}
     */
    onMove: noop,
    /**
     * Same as above, except fired when released.
     * @type {Function}
     */
    onRelease: noop,
    /**
     * A callback function that will be called before open.
     * @type {Function}
     */
    onBeforeOpen: noop,
    /**
     * A callback function that will be called before close.
     * @type {Function}
     */
    onBeforeClose: noop,
    /**
     * A callback function that will be called before grab.
     * @type {Function}
     */
    onBeforeGrab: noop,
    /**
     * A callback function that will be called before release.
     * @type {Function}
     */
    onBeforeRelease: noop,
    /**
     * A callback function that will be called when the hi-res image is loading.
     * @type {Function}
     */
    onImageLoading: noop,
    /**
     * A callback function that will be called when the hi-res image is loaded.
     * @type {Function}
     */
    onImageLoaded: noop
});

9. API methods.

const instance = new Zooming()
// attach the library to specific element
instance.listen('.img-zoomable');
// another way to pass options
instance.config({
  // options
})
// zoom an image
instance.open(img, function onOpen(target) {
  // do something
})
// close the zooming
instance.close(function onClose(target) {
  // do something
})
// grab the zoomed image
instance.grab(x, y, scaleExtra, function onGrab(target) {
  // do something
})
// move the zoomed image
instance.move(x, y, scaleExtra, function onMove(target) {
  // do something
})
// release the grabbed image
instance.release(function onRlease(target) {
  // do something
})