This time I will share jQuery Plugin and tutorial about Basic Responsive Gallery Lightbox Plugin – lightweightLightbox, hope it will help you in programming stack.
lightweightLightbox is a lightweight gallery / image viewer jQuery plugin which displays your images in a lightbox- and slider-like gallery popup with next / prev navigation.
How to use it:
1. Load the stylesheet lightweightLightbox.css in the head to style the gallery lightbox.
1 |
<link rel="stylesheet" href="css/lightweightLightbox.css"> |
2. The plugin requires Font Awesome 4 icon font for navigation arrows.
1 |
<link rel="stylesheet" href="font-awesome.min.css"> |
3. Insert your images into the webpage.
01 |
<div class="lightbox-container"> |
03 |
<img alt="Alt1" class="lightbox-image" src="1.jpg"> |
06 |
<img alt="Alt2" class="lightbox-image" src="2.jpg"> |
09 |
<img alt="Alt3" class="lightbox-image" src="3.jpg"> |
12 |
<img alt="Alt4" class="lightbox-image" src="4.jpg"> |
15 |
<img alt="Alt5" class="lightbox-image" src="5.jpg"> |
4. Load jQuery library and the script lightweightLightbox.min.js at the end of the document.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="js/lightweightLightbox.min.js"></script> |
5. Enable the gallery lightbox by calling the function on the top container.
1 |
$(".lightbox-container").lightweightLightbox(); |
6. Disable the navigation arrows.
1 |
$(".lightbox-container").lightweightLightbox({ |
This awesome jQuery plugin is developed by Silver89. For more Advanced Usages, please check the demo page or visit the official website.
