ZOOOM.JS

A simple plugin for image zoooming without dependencies. Only pure javascipt.

Installation

CDN

JavaScript

<script src="https://cdn.jsdelivr.net/gh/tomickigrzegorz/[email protected]/dist/zooom.min.js"></script>

Note: In the dist folder we have available iffe, umd and es versions as well as minified *.min.js versions

-- OR --

Download from dist folder and insert to html:

• zooom.min.js

Demo

See the demo - example

How to add basic version to page

1. Just download the library from the dist/zoom.min.js and add it to head. Libraries in iffe, umd, esm and IE compatible library are available.

<script src="path/to/zooom.min.js"></script>

2. For each photo you want to grow, add a class in our example it's img-zoom

<img class="img-zoom" src="./images/image.jpg" />

3. Now all you have to do is call our library, this is the simplest example. Below you will find a description of how to configure the library more.

<script>
  window.addEventListener("DOMContentLoaded", function () {
    new Zooom("img-zoom");
  });
</script>

Clone the repo and install dependencies

git clone https://github.com/tomickigrzegorz/zooom.js.git
cd zooom
yarn
# or
npm i

Watch/Build the app

Watch the app, just call:

yarn dev
# or
npm run dev

Build app:

yarn prod
# or
npm run prod

Configuration of the plugin

props	type	default	require	description
zIndex	Number	1		Option to control layer positions
animationTime	Number	300		Animation speed in milliseconds
in / out	String	zoom-in / zoom-out		The cursor property specifies the mouse cursor to be displayed when pointing over an element
overlay	String			Overlay layer color and opacity rgba(255,255,255,0.9); or hsla(0, 0%, 100%, 0.9);
data-zooom-big	string			The large version of the photo is the views instead of the thumbnail
onResize	Function			A function that can be used to block clicking on an image. See example below - How to prevent zoom-in/out images
onOpen	Function			A helper function with which we can, for example, add text from the caption to the photo to show when zooming in on the photo. In the function we have access to the image element
onClose	Function			A function that runs when the photo is closed. It can be combined with the function onOpen see example. As in the previous onOpen function, here we have access to the image element

Minimal configuration

new Zooom("img-zoom");

Sample configuration

new Zooom("img-zoom", {
  // control layer positions
  zIndex: 9,

  // animation time in number
  animationTime: 300,

  // cursor type
  cursor: {
    in: "zoom-in",
    out: "zoom-out",
  },

  // overlay layer color and opacity, rgba, hsla, ...
  overlay: "rgba(255,255,255,0.9)",

  // callback function
  // see usage example docs/index.html
  onResize: function () {},
  onOpen: function (element) {},
  onClose: function (element) {},
});

How to use Zooom with Bootstrap Carousel

See an example

new Zooom("img-zoom", {
  zIndex: 9,

  // animation time in number
  animationTime: 300,

  // cursor type
  cursor: {
    in: "zoom-in",
    out: "zoom-out",
  },

  // overlay layer color and opacity, rgba, hsla, ...
  overlay: "rgba(255,255,255,0.9)",

  // callback function
  // see usage example docs/index.html
  onOpen: function (element) {
    // we stop automatic scrolling when we do zoom images
    $(".carousel").carousel("pause");
  },

  onClose: function (element) {
    // we restart the carousels after closing the photo
    $(".carousel").carousel("cycle");
  },
});

How to prevent zoom-in/out images

Below is an example showing how to block a click when the browser width is less than 600px Of course, here is an example with the width of the window, but nothing prevents you from using it in a different way. The most important thing is to return the logical value - true/false. Each reduction/reduction of the window reads this variable and blocks the click.

new Zooom("img-zoom", {
  // we set different types of cursor depending on
  // the width of the window below we pass
  // the variables for the cursor styles set
  // dynamically in the calback onResize function
  cursor: {
    in: "var(--zoom-in)",
    out: "var(--zoom-out)",
  },
  onResize: function () {
    // we set the page width from which it will
    // be possible to click on the image
    let responsiveMin = 600;

    // we check the width of the browser window
    const windowWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;

    // we return the boolean value 'true/false'
    // the value 'true' blocks clicking the image
    const widthWindow = windowWidth < responsiveMin ? true : false;

    // I set different cursors depending on the width of the window
    const root = document.documentElement;
    root.style.setProperty("--zoom-in", widthWindow ? "default" : "zoom-in");
    root.style.setProperty("--zoom-out", widthWindow ? "default" : "zoom-out");

    return widthWindow;
  },
});

Browser support

Zooom supports all major browsers including IE 11 and above. It also works in the overflow element.

If you want to use data-zooom-big on IE browser you have to use polyfill for promise https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js

local files

• dist/zooom.ie.min.js

cdn

• https://cdn.jsdelivr.net/gh/tomickigrzegorz/[email protected]/dist/zooom.ie.min.js

License

This project is available under the MIT license.