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.