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

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
      ratio: 0.9,

      // whether to show the scrollbar
      scrollbar: false,

      // zoom options
      zoom: { 
        min: 0.1,
        max: 5,
        step: 0.1
      }

      // callback
      onInited: function (){
        // do something
      },
      
});

4. Update the image previewed in cases where new image are added.

myViewer.update()

Changelog:

05/05/2021

• fixed images rotate bug

03/22/2021

• Update CSS