https://github.com/mathialo/imagezoom.js
JavaScript utility for making images zoomable on a website
https://github.com/mathialo/imagezoom.js
clickable-images image image-zoom javascript-library webpage
Last synced: 3 months ago
JSON representation
JavaScript utility for making images zoomable on a website
- Host: GitHub
- URL: https://github.com/mathialo/imagezoom.js
- Owner: mathialo
- License: mit
- Created: 2017-07-05T15:45:29.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-07-20T13:10:54.000Z (almost 4 years ago)
- Last Synced: 2025-01-12T17:38:37.986Z (5 months ago)
- Topics: clickable-images, image, image-zoom, javascript-library, webpage
- Language: JavaScript
- Size: 10.7 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# imagezoom.js
Simple and lightweight JavaScript utility for making images zoomable on a website.
## Installation and usage
To use imagezoom.js with your webpage, simply download the js file from this repository and include it in the header of the document like so:
``` html
```
You can now use imagezoom.js on your site.
## Quick documentation
This is a quick description of the functions that are of intrest to the user:
- `applyToImage(htmlDOM)` makes the given image clickable. It takes the DOM element of the image you want clickable as an argument
- `applyToAllImgTags()` applies imagezoom to all images on the webpage.
- `applyToClass(classname)` applies imagezoom to all images within a class.
- `setZoomFactor(percentage)` sets the percentage of the screen's width to be occupied by the zoomed image. Expects an integer between 1 and 100. Default is 75.
All functions in imagezoom.js are prefixed with the namespace `imgzm`.
## Example
Here is a small example of a site that loads imagezoom.js, and applies it to all images on the site once the site is loded:
``` html
document.addEventListener("DOMContentLoaded", function(event) {
imgzm.applyToAllImgTags();
});
A bunch of images:
```