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

Category: Javascript , Recommended , Zoom | December 26, 2019
Author:kingdido999
Views Total:1,743 views
Official Page:Go to website
Last Update:December 26, 2019
License:MIT

Preview:

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

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
})

You Might Be Interested In:


2 thoughts on “Smooth Image Zooming As Seen On Medium.com – zooming.js

    1. Beth

      Correction – I changed this to an object tag, how would I allow zooming for both objects and img sources on my site?

      Reply

Leave a Reply