Image Lightbox With Zoom & Drag Capabilities - jQuery Image Viewer

The Image Viewer jQuery plugin enhances the image viewing experience by providing an interactive, responsive lightbox popup, where users can explore images in greater detail while the main content gracefully blurs in the background.

Users can easily drag images to different positions within the lightbox or use their mouse wheel to zoom in and out, thanks to the integration with jQuery UI's draggable widget. This functionality is particularly useful for webpages that feature high-quality images, such as art galleries, e-commerce sites, and product landing pages.

How to use it:

1. Install and import the Image Viewer jQuery plugin.

# NPM
$ npm install image_viewer_jquery

import "./src/index.js";

2. Or directly load the complied JavaScript image-viewer.js (jQuery & jQuery UI Draggable are included) in the document.

<script src="./dist/image-viewer.js"></script>

3. Call the function ImageViewer on your images, and the plugin will do the rest.

<img src="1.jpg" class="full-view-image" alt="">
<img src="2.jpg" class="full-view-image" alt="">
<img src="3.jpg" class="full-view-image" alt="">
...

const imageViewer = new ImageViewer('.full-view-image', {
  // options here
});

4. Set the max zoom level. Default: 1.

const imageViewer = new ImageViewer('.full-view-image', {
  maxZoomLevel: 5,
});

5. Change the unique ID assigned to the enlarged image. Default: "#fullImage".

const imageViewer = new ImageViewer('.full-view-image', {
  fullImageId: "#enlargedImage"
});

---

This awesome jQuery plugin is developed by htut-git. For more Advanced Usages, please check the demo page or visit the official website.