JavaScript Library For Intelligent Zoom Experience – Image Zoom

Image Zoom is a pure JavaScript library that provides an intelligent zoom experience on your web images. Inspired by Medium’s image zoom.

Features:

• Click to zoom
• Dismiss image zoom on scroll and/or click

How to use it:

Download the zip, unzip it and the include the following files on the webpage.

<link rel="stylesheet" href="src/image-zoom.css">
<script src="src/image-zoom.js"></script>

Initialize the library on all the images found in the document.

<img src="img/horizontal.jpg" class="zoomExample" />

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

Enable a thumbnail to open a larger image.

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

Specify the height/width of the image.

<img 
     src="img.jpg"
     data-zooming-width="1920" 
     data-zooming-height="1080" 
/>

All default configurations to customize the image zoom 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,
})

Callback functions available.

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

API methods.

// apply options
instance.config({
  // options here
});
// opens an image
instance.open(imgID, function onOpen(target) {
  // do something
});
// grabs the element
instance.grab(x, y, scaleExtra, function onGrab(target) {
  // do something
});
// moves the elemnt
instance.move(x, y, scaleExtra, function onMove(target) {
  // do something
});
// releases the element
instance.release(function onRlease(target) {
  // do something
});
// closes the elemnt
instance.close(function onClose(target) {
  // do something
});

Changelog:

v2.1.0 (09/14/2018)

• No longer listen to images with data-action=”zoom” on initialization
• Remove defaultZoomable option