This time I will share jQuery Plugin and tutorial about Fullscreen Responsive Image Carousel Lightbox With jQuery, hope it will help you in programming stack.
A simple, lightweight, responsive jQuery image lightbox plugin where the users are able to scroll through the enlarged images with navigation arrows just like a carousel.
Click on the thumbnails to open the lightbox. Click on the X button or press the ESC key to close the lightbox.
How to use it:
1. Load the stylesheet lightbox.css in the header, and the JavaScript lightbox.css after jQuery.
1 |
<link rel="stylesheet" href="css/lightbox.css"> |
3 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
4 |
crossorigin="anonymous"> |
6 |
<script src="js/jquery.lightbox.js"></script> |
2. Load the necessary Font Awesome for the lightbox icons.
3 |
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" |
4 |
crossorigin="anonymous"> |
3. Add thumbnails and image links to the gallery.
03 |
<a href="1.jpg" class="gal_link"> |
04 |
<img src="thumb-1.jpg"> |
06 |
<a href="2.jpg" class="gal_link"> |
07 |
<img src="thumb-2.jpg"> |
09 |
<a href="3.jpg" class="gal_link"> |
10 |
<img src="thumb-3.jpg"> |
4. Initialize the lightbox plugin and done.
03 |
$(document).ready(function(){ |
05 |
var galLink = $("a.gal_link"); |
This awesome jQuery plugin is developed by karolinaklein. For more Advanced Usages, please check the demo page or visit the official website.
