Mobile-friendly Image Viewer Plugin - jQuery img-preview.js

img-preview.js is a lightweight (~2kb minified) and simple-to-use jQuery plugin which provides the 'Click or Tap To Zoom' functionality on your images.

Features:

• Written in ES6.
• Supports both jQuery and Zepto.js.
• Responsive and Mobile friendly.

How to use it:

1. Insert your images with the following HTML data attributes:

• data-pic-title: image title
• data-pic-desc: image description
• data-pic: large version of your image

<img data-pic-title="Image 1" 
     data-pic-desc="Description 1"
     data-pic="1.jpg"
     src="thumb-1.jpg">

<img data-pic-title="Image 2" 
     data-pic-desc="Description 2"
     data-pic="2.jpg"
     src="thumb-2.jpg">

<img data-pic-title="Image 3" 
     data-pic-desc="Description 3"
     data-pic="3.jpg"
     src="thumb-3.jpg">

2. Put jQuery library (or Zepto.js) and the minified version of the jQuery img-preview.js at the end of the document.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/imgPreview.min.js"></script>

3. Style the image popup & background overlay.

.img-preview-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  background-color: rgba(0,0,0,.5);
}

.img-preview-popover {
  position: fixed;
  z-index: 9999;
}

4. Style the image description bar.

.img-preview-foot {
  width: 96%;
  padding: 0 2%;
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
}

.img-foot-title {
  font-size: 16px;
  color: #fff;
  margin-top: 5px;
}

.img-foot-desc {
  font-size: 12px;
  color: #fff;
  margin-top: 5px;
  line-height: 24px;
}

5. Initialize the plugin and done.

$(() => $.imgPreview());

6. Default configuration options.

$.imgPreview({
  el: '[data-pic]', 
  attr: 'data-pic', 
  attrTitle: 'data-pic-title',
  attrDesc: 'data-pic-desc', 
  mode: 'single',
  isMaskShow: true, 
  maskBgColor: 'rgba(0,0,0,.5)'
});

Changelog:

2018-10-31

• JS update

2018-09-06

• bugfix

2018-09-06

• add cursor zoom-out

2018-01-02

• added maskBgColor

---

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