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

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.


  • 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());

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

  • Publication date: 07.12.2017
  • Source