|
| 1 | +# svelte-magnifier |
| 2 | + |
| 3 | +**Svelte image magnifier component** |
| 4 | + |
| 5 | +- Simple and customizable |
| 6 | +- Supports touch screens |
| 7 | +- Allows different files for large image and magnifying glass (e.g. thumbnail and high-resolution image) |
| 8 | + |
| 9 | +**[Demo](https://supercoww.github.io/svelte-magnifier)** |
| 10 | + |
| 11 | +<p align="center"> |
| 12 | + <img src=".github/demo.jpg" width=600 alt="Demo"> |
| 13 | +</p> |
| 14 | + |
| 15 | +## Usage |
| 16 | + |
| 17 | +Install the package using NPM: |
| 18 | + |
| 19 | +```sh |
| 20 | +npm i -D svelte-magnifier |
| 21 | +``` |
| 22 | + |
| 23 | +Add the component to your Svelte application: |
| 24 | + |
| 25 | +```svelte |
| 26 | +<script> |
| 27 | + import { Magnifier } from 'svelte-magnifier'; |
| 28 | +</script> |
| 29 | +
|
| 30 | +<Magnifier src="path/to/image.jpg" width="500px" /> |
| 31 | +``` |
| 32 | + |
| 33 | +## Configuration |
| 34 | + |
| 35 | +| Prop | Type | Default | Description | |
| 36 | +| ---------------- | ------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 37 | +| `src` (required) | String | – | URL/path of the large image | |
| 38 | +| `alt` (required) | String | – | alt attribute of image | |
| 39 | +| `height` | String | `'auto'` | Image height (absolute or relative values possible) | |
| 40 | +| `width` | String | `'100%'` | Image width (absolute or relative values possible) | |
| 41 | +| `className` | String | `''` | Class which will be applied to the image wrapper | |
| 42 | +| `zoomImgSrc` | String | – | URL/path of the image inside the magnifying glass (if not specified, the large image will be used) | |
| 43 | +| `zoomFactor` | Number | `1.5` | Factor by which the zoom image will be scaled (based on the size of the large image) | |
| 44 | +| `mgWidth` | Number | `150` | Width of the magnifying glass in px | |
| 45 | +| `mgHeight` | Number | `150` | Height of the magnifying glass in px | |
| 46 | +| `mgBorderWidth` | Number | `2` | Border width of the magnifying glass in px | |
| 47 | +| `mgShape` | String | `'circle'` | Shape of the magnifying glass (possible values: `'circle'`, `'square'`) | |
| 48 | +| `mgShowOverflow` | Boolean | `true` | Set this to `false` to cut off the magnifying glass at the image borders. When disabling `mgShowOverflow`, it's recommended that you also set all offsets to `0` | |
| 49 | +| `mgMouseOffsetX` | Number | `0` | Horizontal offset of the magnifying glass in px when hovering with a mouse | |
| 50 | +| `mgMouseOffsetY` | Number | `0` | Vertical offset of the magnifying glass in px when hovering with a mouse | |
| 51 | +| `mgTouchOffsetX` | Number | `-50` | Horizontal offset of the magnifying glass in px when dragging on a touch screen | |
| 52 | +| `mgTouchOffsetY` | Number | `-50` | Vertical offset of the magnifying glass in px when dragging on a touch screen | |
| 53 | + |
| 54 | +Any other props will be passed down to the `<img>` element. |
| 55 | + |
| 56 | +## Custom styling |
| 57 | + |
| 58 | +```svelte |
| 59 | +<style> |
| 60 | + :global(.magnifier) { |
| 61 | + /* Styles for <div> around image and magnifying glass */ |
| 62 | + } |
| 63 | + :global(.magnifier-image) { |
| 64 | + /* Styles for large image */ |
| 65 | + } |
| 66 | + :global(.magnifying-glass) { |
| 67 | + /* Styles for magnifying glass */ |
| 68 | + } |
| 69 | +</style> |
| 70 | +``` |
| 71 | + |
| 72 | +## Developing |
| 73 | + |
| 74 | +Once you've created a project and installed dependencies with `pnpm install`, start a development server: |
| 75 | + |
| 76 | +```bash |
| 77 | +npm run dev |
| 78 | + |
| 79 | +# or start the server and open the app in a new browser tab |
| 80 | +npm run dev -- --open |
| 81 | +``` |
0 commit comments