This time I will share jQuery Plugin and tutorial about Simple Touch-enabled Image Viewer Plugin with jQuery, hope it will help you in programming stack.
A simplest jQuery image viewer plugin which allows you to display images in a responsive lightbox, with support for custom trigger/close events, retina images, and custom viewer open animations.
How to use it:
1. Load the jQuery library and the jQuery image viewer plugin in the document.
1 |
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> |
2 |
<script src="image-viewer.js"></script> |
2. Call the plugin on the images and you’re done.
1 |
$('img').imageViewer(); |
3. Customize the image viewer.
01 |
$('img').imageViewer({ |
04 |
classPrefix: 'image-viewer', |
07 |
boundClass: 'image-viewer-bound', |
09 |
/* Events (on the source images) which trigger the viewer */ |
10 |
triggerEvents: 'click', |
12 |
/* Non-exhaustive list of events which close the view */ |
13 |
closeEvents: 'click keydown keypress blur', |
15 |
/* High-quality image URL generator (default: same as source image) */ |
16 |
hiResImageGenerator: identity, |
18 |
/* Buttons are in container or dialog? */ |
19 |
buttonParent: 'container', |
22 |
onView: scrollImageIntoView |
Change logs:
2015-09-02
2015-08-21
2014-11-26
- Fixed background, no CSS left in the script
This awesome jQuery plugin is developed by kartulita. For more Advanced Usages, please check the demo page or visit the official website.
