CyberShell

: / var / www / vhosts / chipionatv.com / httpdocs / tequierocarnaval /
Filename : README.md
back
# 🏞 `image-zoom` 

Image zoom on click as seen on popular publishing platform.

[Demo](https://miloslav.website/image-zoom)

## What it does?

You click on an image and it smoothly zooms in or out to fit screen. You click again — it smoothly goes back to normal. You scroll — it also goes back.

## Why is it better than alternatives?

- 🛠 Framework-agnostic — works with everything from Knockout.js to Web Components
- 👌 Zero-dependency
- 🧬 Perfect for dynamic content, mutation-agnostic — you can do whatever you want with images, it'll work
- ⚡️ Blazing fast — no matter if it's 10 images or 10000, it uses only two event listeners. Not per image, *just two listeners*. Complexity is always *O(1)*
- 🤓 Powered by quirky math to precisely calculate everything and do the trick with only *one transformation*
- 🦋 Looks good on both dark and light modes
- 🍦 Zero-configuration by default but extensible when you need it
- 🗿 Works flawlessly even on iOS Safari, in every orientation, with every image no matter the size and dimensions

## Basic usage

```
npm install mvoloskov/image-zoom --save
```

or

```
yarn add mvoloskov/image-zoom
```

```JS
import imageZoom from 'image-zoom'
imageZoom()
```

### Alternative — use CDN

```HTML
<script src="https://cdn.jsdelivr.net/gh/mvoloskov/image-zoom/dist/image-zoom.min.js"></script>
<script>
  imageZoom()
</script>
```

That's it!

## How it works

Plugin targets *meaningful*, content images:

```HTML
<!-- yes -->
<img src="foo.jpg" alt="Cute kitten" />

<!-- no -->
<img src="bar.jpg" />
<img src="bar.jpg" alt="" />
```

### Redefining what images to target

The default selector is `img[alt]:not([alt=""])`.

You can provide your own though:

```JS
imageZoom({
    selector: 'img, svg'
})
```

### Alternative timing function

You can always hack the plugin redefining straightforward CSS:

```CSS
.image-zoom,
.image-zoom-wrapper::after {
    transition-timing-function: ease-in-out;
}
```

### Alternative background color

```CSS
.image-zoom-wrapper::after {
    background-color: hotpink;
}
```

### Disabling the plugin

Being called, plugin returns the destroy function that you may call to remove event listeners. It will also remove related styles from `<head>` and from images themselves.

```JS
const destroy = imageZoom()

// don't need it anymore
destroy()
```

## Anatomy

- `.image-zoom-wrapper` — element that wraps every image. Mimicks its `display` property. We use it to add page background and slightly separate the zoomed image from what is behind.
- `.image-zoom-wrapper-zoomed` — the same wrapper but when image is zoomed.
- `.image-zoom` — image itself that was processed and is interactive ready to zoom.
- `.image-zoom-zoomed` — zoomed image.

## Limitations

- `img` inline styles will be destroyed. Use CSS selectors to stylize images.
- `img` shouldn't have transforms. If needed, wrap it with a container and apply transforms there instead.
- `:root`'s `overflow-x` will be `hidden`

Enjoy!