Skip to content

akbaruddin/image-zoom-simple

Repository files navigation

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.