Zoom Image

Instructions

Overview

Add click-to-zoom functionality to your images, allowing visitors to view them in a full-screen overlay with optimized display.

Getting Started

Quick Start

1. Click the Copy Component button on the top of the page.
2. Paste the component into your Webstudio site.

Manual Start

1. Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Zoom%20Image/zoom-image-v1.1.js"></script>[/code-block]

2. Add the Attribute: Add the dv-zoom-image attribute to any image or image container: <img src="your-image.jpg" dv-zoom-image> or <div dv-zoom-image><img src="your-image.jpg"></div>

Features

• Simple Implementation: Works with both direct image elements and container elements
• Responsive Display: Zoomed images maintain aspect ratio and fit within the viewport
• Scroll Lock: Prevents page scrolling while viewing zoomed images
• Optimized Loading: Overlay is created only when needed, improving page performance

Usage Tips

• Apply the attribute to individual images or to containers with multiple images
• Images retain their srcset and sizes attributes for responsive zooming
• Click anywhere on the overlay or the image to close the zoomed view
• The cursor changes to indicate zoom-out functionality

Notes

• Works with all image formats supported by modern browsers
• The overlay uses a semi-transparent black background for optimal viewing
• For best results, use high-resolution images that benefit from zooming