Skip to content

Latest commit

 

History

History
226 lines (166 loc) · 7.58 KB

README.md

File metadata and controls

226 lines (166 loc) · 7.58 KB
Raw

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>
  1. 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" />
  1. 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

License

This project is available under the MIT license.