This time I will share jQuery Plugin and tutorial about Tiny Lightbox Plugin For Images And Galleries – light.js, hope it will help you in programming stack.
A super tiny and fully responsive lightbox jQuery plugin to showcase your images and/or image groups in a simple, elegant way.
More features:
- Supports image descriptions/captions.
- Next/prev buttons to navigate between images in a group.
- Click outside to close the lightbox.
- Keyboard interactions.
- Image not Found handling.
How to use it:
1. Insert the stylesheet jquery.light.css and JavaScript jquery.light.js into the HTML file.
1 |
<link rel="stylesheet" href="./src/jquery.light.css" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="./src/jquery.light.js"></script> |
2. Insert image links to the a tag and define the descriptions in the data-caption attribute.
2 |
data-caption="This is my caption" |
3. To create a gallery lightbox, just group the images using the data-gallery attribute.
02 |
data-caption="This is my caption" |
05 |
<img src="thumb-1.jpg"> |
09 |
data-caption="This is my caption" |
12 |
<img src="thumb-2.jpg"> |
16 |
data-caption="This is my caption" |
19 |
<img src="thumb-3.jpg"> |
4. Initialize the lightbox plugin on the image links. Done.
2 |
$('a[rel=light]').light(); |
5. Customize the prev/next/loading/error text.
2 |
$('a[rel=light]').light({ |
6 |
errorText:'Image not Found' |
6. Enable/disable the keyboard support. Default: true.
2 |
$('a[rel=light]').light({ |
7. Determine whether to disable the Click event on the element. Default: true.
2 |
$('a[rel=light]').light({ |
This awesome jQuery plugin is developed by edmundgentle. For more Advanced Usages, please check the demo page or visit the official website.
