jquery-lightweightLightbox
What does this plugin do?
The purpose of this plugin is to provide a simple, lightweight and responsive lightbox with no bloat and only the most basic functionality.
Requires
- jQuery
- HTML web page with CSS
- FontAwesome
Installation
- Download the lightweightLightbox jQuery plugin and css files, you can choose the lightweightLightbox.js version or the lightweightLightbox.min.js for faster load times
- Include both jQuery and the plugin file in your HTML, ideally before the tag, the plugin must be after jQuery.
- Include the css file in your header
- Initiate the plugin using: $(".lightbox-container").lightweightLightbox();
- Follow markup instructions
- Add FontAwesome for the chevron and close icons: https://fortawesome.github.io/Font-Awesome/get-started/
Demo
You can view a live demo at the following location: Demo Link
Usage
The following is a basic example of how to use the plugin.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/lightweightLightbox.css"> <title>LightweightLightbox jQuery plugin demo</title> </head> <body> <div class="lightbox-container"> <div class="box"> <img alt="An example image 1" class="lightbox-image" src="images/example-1.jpg" /> </div> <div class="box"> <img alt="An example image 2" class="lightbox-image" src="images/example-2.jpg" /> </div> <div class="box"> <img alt="An example image 3" class="lightbox-image" src="images/example-3.jpg" /> </div> <div class="box"> <img alt="An example image 4" class="lightbox-image" src="images/example-4.jpg" /> </div> <div class="box"> <img alt="An example image 5" class="lightbox-image" src="images/example-5.jpg" /> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/lightweightLightbox.min.js"></script> <script type="text/javascript"> $(".lightbox-container").lightweightLightbox(); </script> </body> </html>There is now additional support to dynamically extend the lightbox if new elements are loaded in post page build. You can now run the following after you've loaded content and this will refresh the count.
<script type="text/javascript"> var lightweightLightbox = $(".lightbox-container").lightweightLightbox(); //After loading of new content run lightweightLightbox.refreshElementCount(); </script>Support
Tested and working in the following:
- Chrome 47
- Firefox 42
- Microsoft Edge 25
