Image Zoom Simple
Svelte Image Zoom Plugin
Svelte Image Zoom Plugin
The Svelte Image Zoom Plugin is a lightweight and customizable plugin that provides zoom functionality for images in Svelte applications. It allows users to hover over an image and view a zoomed-in version in a separate box, enhancing the user experience and providing a closer look at image details.
Features
- Smooth zoom functionality on mouse hover
- Customizable zoom box size and selector dimensions
- Support for both local and remote images
- Easy integration with Svelte applications
Props
The ImageZoom component accepts the following props:
| Prop | Type | Default Value | Description |
|---|---|---|---|
| imageStyle | Object | {} | Custom CSS styles for the image element. |
| containerStyle | Object | {} | Custom CSS styles for the container element. |
| url | String | null | The path or URL of the image to be displayed. |
| zoomImgUrl | String | null | An alternative image URL to use for zoomed view (optional, if not provided, the url prop is used). |
| viewerWidth | Number | 200 | The width of the zoom viewer in pixels. |
| viewerHeight | Number | 400 | The height of the zoom viewer in pixels. |
| selectorWidth | Number | 30 | The width of the zoom selector box in pixels. |
| selectorHeight | Number | 30 | The height of the zoom selector box in pixels. |
Styling
The ImageZoom component can be customized using CSS styles. Here are the CSS classes and their default styles:
.zoom-box: The container element that wraps the image and the zoom components..zoom-box > img: The image element..viewer-box: The zoom viewer box element..viewer-box img: The zoomed-in image element inside the viewer box..zoom-selector: The zoom selector box element.
Example
<script>
import ImageZoom from "image-zoom-simple";
</script>
<main>
<ImageZoom
imageStyle={{ width: '200px' }}
viewerHeight={250}
url="https://images.unsplash.com/photo-1686077304557-d13e1b91ac06?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2864&q=80"
/>
<ImageZoom
imageStyle={{ width: '200px' }}
viewerHeight={200}
url="https://images.unsplash.com/photo-1674574124349-0928f4b2bce3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
/>
</main>
You can override these styles in your application's CSS to achieve the desired visual appearance.
