Fullscreen Responsive Image Carousel Lightbox With jQuery
File Size: | 4.66 KB |
---|---|
Views Total: | 6430 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.
<link rel="stylesheet" href="css/lightbox.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="js/jquery.lightbox.js"></script>
2. Load the necessary Font Awesome for the lightbox icons.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
3. Add thumbnails and image links to the gallery.
<div id="gallery"> <a href="1.jpg" class="gal_link"> <img src="thumb-1.jpg"> </a> <a href="2.jpg" class="gal_link"> <img src="thumb-2.jpg"> </a> <a href="3.jpg" class="gal_link"> <img src="thumb-3.jpg"> </a> ... </div>
4. Initialize the lightbox plugin and done.
(function($){ $(document).ready(function(){ var galLink = $("a.gal_link"); galLink.lightbox(); }); })(jQuery);
This awesome jQuery plugin is developed by karolinaklein. For more Advanced Usages, please check the demo page or visit the official website.