ZoomifyJs Lightweight and simple image zoom with no dependencies

Zoomifyjs is a lightweight (only 1kb gzipped) image zoom plugin with no dependencies and no styling. As Brad Frost once said “do that shit yourself”. It is 100% open source and available on Github. It is free to use on personal and commercial projects. Use it with your favourite module bundler or by manually injecting the script into your project.

Download ZoomifyJs from Github

1. Installation
2. Options
3. API
4. Example
5. Contributing
6. Roadmap
7. Extra

Installation

Setup is easy. A little bit of markup…

<picture>
    <img 
        src="./assets/car-image-300x300.webp"
        zoomify="./assets/car-image.webp"
        alt="Car-Image"
        id="zoomifyJs"
    >
</picture>

If you are using a module bundler like Webpack or Vite…

npm install zoomifyjs

Or from yarn

yarn add zoomifyjs # Available soon....

import ZoomifyJs from "zoomifyjs";
new ZoomifyJs();

Or include from cdn

<script src="https://unpkg.com/zoomifyjs@latest/dist/zoomifyjs.umd.js"></script>

…or manually inject the minified script into your website.

<script src="zoomifyjs.umd.js"></script>
<script>
  new ZoomifyJs();
</script>

Options

ZoomifyJs comes with a few (optional) settings that you can change by passing an object as an argument. Default values are presented below.

new ZoomifyJs({
  selector: '.zoomifyJs',
  transitionDuration: 300,
  easing: 'ease-in-out',
  scale: 2,
  clickToZoom: true
});

selector (string)
The selector to use as a carousel. Make sure to set proper sizing on image element (which will be used on parent element as max sizing to prevent image overflowing on scale)

transitionDuration (number)
Zoom transition duration in milliseconds.

easing (string)
See transition-timing-function for more information.

scale (number)
The number of zoom scale amount.

clickToZoom (boolean)
Enable zoom after click on the image.

Api

destroy (function)
Remove zoom instance from the element.

Example

<picture>
    <img 
        src="./assets/car-image-300x300.webp"
        zoomify="./assets/car-image.webp"
        alt="Car-Image"
        id="zoomifyJs"
    >
</picture>

const zoomifyJs = new ZoomifyJs();

Example 1

Example 2 (Click to zoom)

More examples

Coming soon...

Contribution

Coming soon...

Roadmap

• Register on npm package registry
• Register on yarn package registry
• Register for cdn. (npmjs provide cdn via unpkg.)
• Enable zoom on multiple image with single instance
• Allow DOMElement for selector value
• Image parent element styling improvement (needs basic styling on instance initialization, before clickToZoom)
• Change image source bug fix
• Allow customizing click to zoom button stylings
• Codepen collection for more examples
• migrate to ts for better type-hinting and type safety.

Extra

• Code structure and initial docs on github-pages using jekyll is inspired from siema a carousel plugin.

License

Made with ❤️

Published under MIT License.