1.0.4 • Published 1 year ago
@esharri2/image-hover-zoom v1.0.4
image-hover-zoom
A web component for zooming an image on hover
Example
General usage example:
<script type="module" src="image-hover-zoom.js"></script>
<image-hover-zoom>
<img
alt="A black puppy looking up from the ground."
src="https://picsum.photos/id/237/800/800"
height="400"
width="400"
/>
</image-hover-zoom>Installation
You have a few options (choose one of these):
- Install via npm:
npm i @esharri2/image-hover-zoom - Download the source manually from GitHub into your project.
Features
This web component allows you to:
- Make any image "zoom" on hover, touch, or focus.
- Allow users to change zoomed area using a mouse, keyboard arrows, or touch gestures.
- Easily customize the zoomed image source, the amount of zoom, the amount of movement per key stroke, and the aria-label included on the component.
Attributes
| Name | Attribute | Purpose | Default | Optional |
|---|---|---|---|---|
| Key distance | data-key-distance | Controls how much the zoomed area moves on each arrow key stroke | 30 | Yes |
| Label | data-label | Provides an aria-label on the custom element (since the element can gain focus) | Use your mouse, touch, or arrow keys to zoom in on an area of the image. | Yes |
| Scale | data-scale | Controls how much the image is zoomed | 2 | Yes |
| Src | data-src | Controls what image src loads when the image is zoomed | Whatever currentSrc was at time of zoom | Yes |
Credit
- Thanks David Darnes for the component template