Nature Preceded Machines

    vanilla-js-wheel-zoom

    6.12.0 • Public • Published

    vanilla-js-wheel-zoom

    Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)

    GitHub tag (latest by date) GitHub stars GitHub issues GitHub forks

    Advantages:

    • the ability to fit the image into a container of any proportion
    • the ability to scale any HTML content
    • touch screen devices support

    Starting with version 5, the plugin switched to using style transform. To use the plugin in older browsers, switch to earlier versions.

    You need to center the image (or any HTML content) in the "window" in which scaling will take place. The "window" is taken automatically as the parent of the image in DOM.

    HTML content can be of any structure, but the topmost child element in the “window” must be one. In the example with "badge" below, it will be more clear what is meant.

    🖐 If you find my plugin helpful, please donate me 🤝

    Demo (only one image)

    Demo (html)

    Demo (multi images with custom align)

    Playground... Have some fun 🤸‍♂️

    Install

    npm i vanilla-js-wheel-zoom

    or

    yarn add vanilla-js-wheel-zoom

    Get started

    #myWindow {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #999;
    }
    
    #myContent {
        position: relative;
        display: flex;
        align-items: center;
    }
    <div id="myWindow" style="width:600px;height:600px;">
        <img id="myContent" src="https://placehold.it/2400x1400" alt="image" />
    </div>
    WZoom.create('#myContent');

    Supported "hotswap" src of image (when type = image). You can do document.getElementById('myContent').src = "_new_path_" after initializing the plugin.

    Syntax & Parameters

    /**
     * Create WZoom instance
     * @param {string|HTMLElement} selectorOrHTMLElement
     * @param {Object} [options]
     * @returns {WZoom}
     */
    const wzoom = WZoom.create(selectorOrHTMLElement[, options]);

    Default options

    const defaults = {
        // type content: `image` - only one image, `html` - any HTML content
        type: 'image',
        // for type `image` computed auto (if width set null), for type `html` need set real html content width, else computed auto
        width: null,
        // for type `image` computed auto (if height set null), for type `html` need set real html content height, else computed auto
        height: null,
        // drag scrollable image
        dragScrollable: true,
        // options for the DragScrollable module
        dragScrollableOptions: {
            // smooth extinction (value in seconds)
            smoothExtinction: .25,
            // callback triggered when grabbing an element
            onGrab: null,
            // callback triggered when moving an element
            onMove: null,
            // callback triggered when dropping an element
            onDrop: null
        },
        // minimum allowed proportion of scale (computed auto if null)
        minScale: null,
        // maximum allowed proportion of scale (1 = 100% content size)
        maxScale: 1,
        // image resizing speed
        speed: 10,
        // zoom to maximum (minimum) size on click
        zoomOnClick: true,
        // if is true, then when the source image changes, the plugin will automatically restart init function (used with type = image)
        // attention: if false, it will work correctly only if the images are of the same size
        watchImageChange: true,
        // smooth extinction (value in seconds)
        smoothExtinction: .3,
        // align content `center`, `left`, `top`, `right`, `bottom` 
        alignContent: 'center',
        /********************/
        disableWheelZoom: false
    };

    Badge on the image

    #myWindow {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: aqua;
    }
    
    #myContent {
        position: relative;
        display: flex;
        align-items: center;
    }
    
    #myBadge {
        position: absolute;
        border: solid 2px red;
        font-size: 80px;
    }
    
    #myImage {
        display: block;
        width: auto;
        height: auto;
        margin: auto;
        align-self: center;
        flex-shrink: 0;
    }
    <div id="myWindow" style="width:600px;height:600px;">
        <div id="myContent">
            <div id="myBadge" style="left:900px;top:500px;">Badge</div>
            <img id="myImage" src="https://placehold.it/2500x1500" alt="image"/>
        </div>
    </div>
    WZoom.create('#myContent', {
        type: 'html',
        width: 2500,
        height: 1500
    });

    Control buttons

    <button data-zoom-up>Zoom Up</button>
    <button data-zoom-down>Zoom Down</button>
    const wzoom = WZoom.create('img');
    
    document.querySelector('[data-zoom-up]').addEventListener('click', () => {
        wzoom.zoomUp();
    });
    
    document.querySelector('[data-zoom-down]').addEventListener('click', () => {
        wzoom.zoomDown();
    });

    On window resize

    const wzoom = WZoom.create('img');
    
    window.addEventListener('resize', () => {
        wzoom.prepare();
    });

    How to rotate the image?

    Try this 😉 (and see demo)

    Options

    name type default note
    type String image image - if you need to scale only one image. In this case, there is no need to pass the parameters width and height. html - if you need to scale the HTML code. It is advisable to specify the parameters width and height that correspond to the original full size of the HTML content.
    width Number null For type image computed auto (if width set null), for type html need set real html content width, else computed auto.
    height Number null For type image computed auto (if height set null), for type html need set real html content height, else computed auto.
    dragScrollable Boolean true If true - scaled image can be dragged with the mouse to see parts of the image that are out of scale.
    dragScrollableOptions.smoothExtinction Number .25 Time of smooth extinction. if 0 then no smooth extinction. (value in seconds)
    dragScrollableOptions.onGrab Function undefined Called after grabbing an element.
    dragScrollableOptions.onMove Function undefined Called on every tick when moving element.
    dragScrollableOptions.onDrop Function undefined Called after dropping an element.
    minScale Number null The minimum scale to which the image can be zoomed.
    If falsy or greater than maxScale then computed auto.
    maxScale Number 1 The maximum scale to which the image can be zoomed.
    1 means that the image can be maximized to 100%, 2 - 200%, etc.
    speed Number 10 Step with which the image will be scaled. Measured in relative units.
    The larger the value, the smaller the step and vice versa.
    zoomOnClick Boolean true Zoom to maximum (minimum) size on click.
    watchImageChange Boolean true If is true, then when the source image changes, the plugin will automatically restart init function (used with type = image). Attention: if false, it will work correctly only if the images are of the same size.
    prepare Function undefined Called after the script is initialized when the image is scaled and fit into the container.
    rescale Function undefined Called on every change of scale.
    alignContent String center Align content center, left, top, right, bottom
    smoothExtinction Number .3 Time of smooth extinction. if 0 then no smooth extinction. (value in seconds)
    disableWheelZoom Boolean false

    API

    name note
    .prepare() Reinitialize script
    .zoomUp() Zoom on one step (see option speed)
    .maxZoomUp() Zoom to max scale
    .zoomDown() Zoom out on one step (see option speed)
    .maxZoomDown() Zoom to min scale
    .zoomUpToPoint({x, y}) Zoom on one step to point (see option speed)
    .zoomDownToPoint({x, y}) Zoom out on one step to point (see option speed)
    .maxZoomUpToPoint({x, y}) Zoom to max scale to point
    .destroy() Destroy object

    LICENSE

    vanilla-js-wheel-zoom is licensed under the GPLv3 license for all open source applications. A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).

    Install

    npm i vanilla-js-wheel-zoom

    DownloadsWeekly Downloads

    677

    Version

    6.12.0

    License

    GPLv3

    Unpacked Size

    117 kB

    Total Files

    17

    Last publish

    Collaborators

    • worka