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

Category: Javascript , Modal & Popup , Recommended | May 15, 2022
Author:yue1123
Views Total:2,167 views
Official Page:Go to website
Last Update:May 15, 2022
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
      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

You Might Be Interested In:


Leave a Reply