JavaScript Library For Intelligent Zoom Experience – Image Zoom

Category: Javascript , Recommended , Zoom | September 14, 2018
Author: kingdido999
Views Total: 1,863
Official Page: Go to website
Last Update: September 14, 2018
License: MIT

Preview:

JavaScript Library For Intelligent Zoom Experience – Image Zoom

Description:

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

One thought on “JavaScript Library For Intelligent Zoom Experience – Image Zoom

  1. Desmond

    Hi, I’m the author of this library. You might want to update “How to use it” section as css external link is no longer needed.

    Reply

Leave a Reply