Lightweight & Easy Image Viewer/Lightbox Library – img-previewer

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