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

Category: Javascript , Modal & Popup , Recommended | March 22, 2021
Author: yue1123
Views Total: 245 views
Official Page: Go to website
Last Update: March 22, 2021
License: MIT

Preview:

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

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:

03/22/2021

  • Update CSS

You Might Be Interested In:


Leave a Reply