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

Mobile-friendly Image Viewer Plugin - jQuery img-preview.js
File Size: 25.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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.


  • 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"

<img data-pic-title="Image 2" 
     data-pic-desc="Description 2"

<img data-pic-title="Image 3" 
     data-pic-desc="Description 3"

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=""></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.

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

Change log:


  • added maskBgColor

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