demo

Get started

z-zoomer is available on npm, published as @benavern/z-zoomer.


npm

The component is available here on npm, you can install it via this command:

npm i @benavern/z-zoomer

Then you can use it in your scripts like so in your js/ts module files: 

import '@benavern/z-zoomer';

CDN

<script type="module" src="https://unpkg.com/@benavern/z-zoomer"></script>

Have fun

For example you can use it to display a slider of images

<z-zoomer>
  <img src="https://picsum.photos/960/540?random=1">
</z-zoomer>

Any HTML will work

<z-zoomer>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore vel recusandae quae accusamus, dolore facilis maxime laboriosam quod provident magni in voluptates unde ex. Eveniet ex a expedita numquam soluta?
  </p>
</z-zoomer>

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore vel recusandae quae accusamus, dolore facilis maxime laboriosam quod provident magni in voluptates unde ex. Eveniet ex a expedita numquam soluta?

Max

You can set max zoom attribute to control the max zoom value. (default: 10, min: 1)

You can reset the component by calling the reset public methode.

HTML

<z-zoomer id="max-demo" max="3">
    <img src="https://picsum.photos/960/540?random=max-1">
</z-zoomer>

TS

document.querySelector('#max-demo-reset-btn')?.addEventListener('click', () => {
    (document.querySelector('#max-demo') as ZZoomer)?.reset();
})

Events

You can react to zoomchange events on the component. It will provide the information whether it is zoomed or not.

Zoomed : 

document.querySelector('#events-demo')?.addEventListener('zoomchange', (e) => {
    const { isZoomed } = (e as CustomEvent).detail;
    document.querySelector('#events-demo-result')!.textContent = isZoomed;
})

Disabled

You can disable any interaction on the zoomer with the disabled attribute.

document.querySelector('#disabled-demo-btn')?.addEventListener('click', () => {
    document.querySelector('#disabled-demo')?.toggleAttribute('disabled');
})

Real life demo

For example, in a carousel (z-carousel) you can zoom a picture and prevent the carousel from moving at the same time.

HTML

<z-carousel id="real-life-demo-carousel" navigation dots pagination drag>
    <z-zoomer>
        <img src="https://picsum.photos/960/540?random=real-life-1">
    </z-zoomer>

    <z-zoomer>
        <img src="https://picsum.photos/960/540?random=real-life-2">
    </z-zoomer>

    <z-zoomer>
        <img src="https://picsum.photos/960/540?random=real-life-3">
    </z-zoomer>


    <svg slot="nav-prev" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"
        viewBox="0 0 24 24">
        <path d="M6 12H18M6 12L11 7M6 12L11 17" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round" />
    </svg>

    <svg slot="nav-next" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"
        viewBox="0 0 24 24">
        <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round" />
    </svg>
</z-carousel>

TS

const realLifeCarousel = document.querySelector('#real-life-demo-carousel');
const realLifeCarouselZoomers = realLifeCarousel?.querySelectorAll('.real-life-demo-zoomer');

if (realLifeCarousel && realLifeCarouselZoomers?.length) {
    realLifeCarouselZoomers.forEach(zoomer => {
        zoomer.addEventListener('zoomchange', (e) => {
            const { isZoomed } = (e as CustomEvent).detail;
            realLifeCarousel.toggleAttribute('disabled', isZoomed)
        })
    })
}

CSS

z-zoomer.real-life-demo-zoomer::part(zoomer):hover {
    cursor: zoom-in;
}

z-zoomer.real-life-demo-zoomer::part(zoomer zoomer--is-zoomed):hover {
    cursor: grab;
}

z-zoomer.real-life-demo-zoomer::part(zoomer zoomer--is-zoomed zoomer--is-mooving):active {
    cursor: grabbing;
}