# @sil/zoom-image

> Click and move, thats what you can do with these images. Sometimes you don't want to create full big things to show zooms. This simple (Vue) component just makes it possible to all you need, see a normal view and a zoomed view. No other options, it's not

Latest version **1.0.6** (published 2018-11-29) · 0 weekly downloads

## Install

```sh
npm install @sil/zoom-image
pnpm add @sil/zoom-image
yarn add @sil/zoom-image
bun add @sil/zoom-image
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2018-11-29 |
| First published | 2018-10-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | hacobvandipyan, silvandiepen |

## Links

- npm: https://www.npmjs.com/package/@sil/zoom-image
- npm.io page: https://npm.io/package/@sil/zoom-image

## Recent versions

- 1.0.6 (latest) — 2018-11-29
- 1.0.5 — 2018-11-29
- 1.0.4 — 2018-11-29
- 1.0.3 — 2018-11-29
- 1.0.2 — 2018-11-28
- 1.0.1 — 2018-10-10
- 1.0.0 — 2018-10-10

## README

# Zoom Image

Click and move, thats what you can do with these images. Sometimes you don't want to create full big things to show zooms.
This simple (Vue) component just makes it possible to all you need, see a normal view and a zoomed view.
No other options, it's not necessary. Keep it simple!

### Install

Install the package
`npm install @sil/zoom-image`

Import the package

`import ZoomImage from '~/@sil/zoom-image`

Define the component:

```js
export default {
	components: {
		ZoomImage
	}
}
```

Use the component:

```html
<template>
	<div>
		<zoom-image src="https://sample.test/image.jpg" cursor="['https://sample.test/cursor.jpg','https://sample.test/cursor-active.jpg']" size="100% auto" />
	</div>
</template>

```


		
### Props

#### src

`src` needs an a absolute link to the image.

default: `null`

#### size

`size` is the size of the initial view. This is used on background-size:. 

default: `contain`

#### showOverlay

`showOverlay` displays an overlay over the image when you hover.

default: `false`

#### showIcon

`showOverlay` displays an zoom icon over the image when you hover.

default: `false`

#### cursor

`cursor` allows giving an alternate cursor when hovering over the component. The prop needs an array, where the values should
be absolute url's to images. When 2 are given, the first one is used on the default state, where the second one will be used when zoomed in.

If you give one link, this is used for both.

default: `[]`

---
_Source: https://npm.io/package/@sil/zoom-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._