Author: | yue1123 |
---|---|
Views Total: | 2,167 views |
Official Page: | Go to website |
Last Update: | May 15, 2022 |
License: | MIT |
Preview:

Description:
img-previewer is a lightweight image viewer/lightbox JavaScript library that is easy to implement on all images with a single JS call.
Features:
- Responsive design.
- Switch between images like a gallery lightbox.
- Zoom in/out with mouse wheel.
- Image rotate.
- Image pan with mouse drag.
- Smooth transitions.
How to use it:
1. Load the img-previewer’s JavaScript and CSS in the HTML document.
<link rel="stylesheet" href="./src/index.css" /> <script src="./dist/img-previewer.min.js"></script>
2. Initialize the img-previewer and we’re done.
const myViewer = new ImgPreviewer('#image-container');
3. Available options.
const myViewer = new ImgPreviewer('#image-container',{ // aspect ratio of image fillRatio: 0.9, // attribute that holds the image dataUrlKey: 'src', // additional styles style: { modalOpacity: 0.6, headerOpacity: 0, zIndex: 99 }, // zoom options imageZoom: { min: 0.1, max: 5, step: 0.1 }, // detect whether the parent element of the image is hidden by the css style bubblingLevel: 0, });
4. Update the image previewed in cases where new images are added.
myViewer.update()
5. More API methods.
// get total amount of image elements myViewer.getTotalIndex(); // show a specific image myViewer.show(index:number); // go to the next myViewer.next(); // go to the previous myViewer.prev();
Changelog:
v2.1.7 (05/15/2022)
- chore: sass to less
v2.1.6 (03/17/2022)
- add show, prev, next methods
- bugfixes
v2.0.4 (12/30/2021)
- code refactor
v2.0.3 (12/28/2021)
- fixed firfox browser mousewheel event is not triggering
- remove console
v2.0.0 (12/27/2021)
- Rewritten in TS.
- Optimized codes.
- Added languages.
- Added more settings.
05/05/2021
- fixed images rotate bug
03/22/2021
- Update CSS