A simple plugin for image zoooming without dependencies. Only pure javascipt.
<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
Download from dist folder and insert to html:
- zooom.min.js
See the demo - example
- Just download the library from the
dist/zoom.min.jsand add it to head. Libraries in iffe, umd, esm and IE compatible library are available.
<script src="path/to/zooom.min.js"></script>- 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" />- 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>git clone https://github.com/tomickigrzegorz/zooom.js.git
cd zooom
yarn
# or
npm iWatch the app, just call:
yarn dev
# or
npm run devBuild app:
yarn prod
# or
npm run prod| 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 |
new Zooom("img-zoom");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) {},
});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");
},
});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;
},
});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
- dist/zooom.ie.min.js
This project is available under the MIT license.