DOCSEARCHbyAlgolia
Submit Docs

js-image-zoom

repository·master·Indexed 42 days ago

https://github.com/malaman/js-image-zoom

A pure JavaScript utility for desktop browsers that enables image zooming on mouse hover. Version 0.6.0 provides a dependency-free ImageZoom class with configurable options for scale, position, and custom styling, as well as setup() and kill() methods for lifecycle management.

Tokens
989
Snippets
4
Records
5
Agent score
3%

What's inside js-image-zoom

  3. Initialize image zoom with ImageZoom

    master

    To use js-image-zoom, create a new instance of ImageZoom by passing a container DOM element and an optional configuration object. The library provides hover-based zoom functionality for desktop browsers without external dependencies.

    If the image dimensions are unknown or you want the image to adapt to its parent, use the fillContainer: true option.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <title>Title</title>
    <script src="https://unpkg.com/js-image-zoom@0.7.0/js-image-zoom.js" type="application/javascript"></script>
</head>
<body>
<div id="img-container" style="width: 400px">
    <img src="https://github.com/malaman/js-image-zoom/blob/master/example/1.jpg?raw=true" />
</div>
<script>

var options2 = {
    fillContainer: true,
    offset: {vertical: 0, horizontal: 10}
};

new ImageZoom(document.getElementById("img-container"), options2);

</script>
</body>
</html>

  4. Configure ImageZoom options

    master

    The ImageZoom constructor accepts two arguments:

    1. container (Object): The DOM element containing the source image.
    2. options (Object): Configuration settings for the zoom behavior.

    Configuration Options Reference

    OptionTypeDescription
    widthnumberWidth of the source image (optional)
    heightnumberHeight of the source image (optional)
    fillContainerbooleanIf true, takes the size of the container (useful if dimensions are unknown) (optional)
    zoomWidthnumberWidth of the zoomed image. Height is automatically set to match source image height (optional)
    imgstringURL of the source image. Use this if the container does not contain an <img> tag (optional)
    scalenumberZoom scale. If not provided, scale is calculated as natural image size / image size (optional if zoomWidth is provided)
    offsetobject{vertical: number, horizontal: number}. Defines the offset of the zoomed image (optional)
    zoomContainernodeDOM node where the zoomedImage will be appended (defaults to the image's container)
    zoomStylestringCustom CSS style applied to the zoomed image (e.g., 'opacity: 0.1; background-color: white;')
    zoomPositionstringPosition of the zoomed image. Options: top, left, bottom, original, or right (default)
    zoomLensStylestringCustom CSS style applied to the zoom lens (e.g., 'opacity: 0.1; background-color: white;')

  5. Manage zoom lifecycle with setup() and kill()

    master

    The ImageZoom constructor returns an object containing methods to control the lifecycle of the zoom instance:

    • setup(): Re-initializes the zoom functionality.
    • kill(): Removes event listeners and cleans up DOM nodes (the lens and the zoomed image) created by the library.
    const zoom = ImageZoom(container, options);

// Later, when you want to remove the zoom effect and clean up the DOM
zoom.kill();