Smooth Image Hover Zoom Effect with Pure JavaScript – Drift

Drift is a standalone and highly configurable JavaScript library that provides responsive, smooth hover (or touch) zoom effect on images.

Features:

• Displays the large image beside the original one.
• Displays a magnifying glass effect on the image in small screen.

Basic usage:

Include both the drift-basic.css and Drift.js onto your webpage.

<link rel="stylesheet" href="dist/drift-basic.css">
<script src="dist/Drift.js"></script>

Insert a thumbnail image to your webpage and use data-zoom attribute to specify the path the large version of this image.

<img class="drift-demo-trigger" 
     data-zoom="large.jpg" 
     src="thumb.jpg"
>

Create a DOM element to append the non-inline ZoomPane to.

<div class="detail">
</div>

Active the image hover zoom effect.

new Drift(document.querySelector('.demo'), {
    paneContainer: document.querySelector('.detail'),
    inlinePane: 900,
    inlineOffsetY: -85,
    containInline: true
});

All configuration options.

new Drift(document.querySelector('.demo'), {
    // Prefix for generated element class names (e.g. `my-ns` will
    // result in classes such as `my-ns-pane`. Default `drift-`
    // prefixed classes will always be added as well.
    namespace: null,
    // Whether the ZoomPane should show whitespace when near the edges.
    showWhitespaceAtEdges: false,
    // Whether the inline ZoomPane should stay inside
    // the bounds of its image.
    containInline: false,
    // How much to offset the ZoomPane from the
    // interaction point when inline.
    inlineOffsetX: 0,
    inlineOffsetY: 0,
    // A DOM element to append the inline ZoomPane to.
    inlineContainer: document.body,
    // Which trigger attribute to pull the ZoomPane image source from.
    sourceAttribute: 'data-zoom',
    // How much to magnify the trigger by in the ZoomPane.
    // (e.g., `zoomFactor: 3` will result in a 900 px wide ZoomPane image
    // if the trigger is displayed at 300 px wide)
    zoomFactor: 3,
    // A DOM element to append the non-inline ZoomPane to.
    // Required if `inlinePane !== true`.
    paneContainer: document.body,
    // When to switch to an inline ZoomPane. This can be a boolean or
    // an integer. If `true`, the ZoomPane will always be inline,
    // if `false`, it will switch to inline when `windowWidth <= inlinePane`
    inlinePane: 375,
    // If `true`, touch events will trigger the zoom, like mouse events.
    handleTouch: true,
    // If present (and a function), this will be called
    // whenever the ZoomPane is shown.
    onShow: null,
    // If present (and a function), this will be called
    // whenever the ZoomPane is hidden.
    onHide: null,
    // Add base styles to the page. See the "Theming"
    // section of README.md for more information.
    injectBaseStyles: true,
    // An optional number that determines how long to wait before
    // showing the ZoomPane because of a `mouseenter` event.
    hoverDelay: 0,
    // An optional number that determines how long to wait before
    // showing the ZoomPane because of a `touchstart` event.
    // It's unlikely that you would want to use this option, since
    // "tap and hold" is much more intentional than a hover event.
    touchDelay: 0,
    // If true, a bounding box will show the area currently being previewed
    // during mouse hover
    hoverBoundingBox: false,
    // If true, a bounding box will show the area currently being previewed
    // during touch events
    touchBoundingBox: false,
    // A DOM element to append the bounding box to.
    boundingBoxContainer = document.body,
    // If true, the events related to handleTouch use passive listeners in
    // order to improve performance for touch devices.
    passive: false,
});

Changelog:

v1.5.1 (03/29/2023)

• Bugfixes