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