A lightweight jQuery plugin to create simple and clean image lightbox with image caption. This lightbox plugin simply detect caption from image alt text and show it in the lightbox popup.
Plugin Preview

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins
Plugin Overview
Plugin: | jquery-simple-clean-lightbox |
Author: | raikerO2 |
Licence: | MIT Licence |
Published: | April 30, 2019 |
Repository: | Fork on GitHub |
Dependencies: | jQuery 1.11.3 or Latest version and Normalize CSS 8.0 |
File Type: | zip archive (HTML, CSS & JavaScript) |
Package Size: | 367 KB |
How to Use Simple Clean Image Lightbox:
1. First of all load the jQuery JavaScript library and Normalize CSS into HTML document to getting started with clean lightbox.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <!-- Normalize CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" />
2. After that, create a section
, add your image links with alt
attribute and place them in unordered list with class name gallery.
<section> <ul class="gallery"> <li><a href="image/castle.jpg"><img src="image/castle.jpg" alt="Large Castle"></a></li> <li><a href="image/nature.jpg"><img src="image/nature.jpg" alt="Beautiful Nature"></a></li> <li><a href="image/ship.jpg"><img src="image/ship.jpg" alt ="Wide Ocean"></a></li> <li><a href="image/tunnel.jpg"><img src="image/tunnel.jpg" alt ="Misterious Tunnel"></a></li> </ul> </section>
3. Finally include the clean lightbox’s CSS and JavaScript files in your webpage and done!
<!-- Clean Lightbox CSS --> <link rel="stylesheet" href="css/style.css"> <!-- Clean Lightbox JS --> <script src="js/jquery.clean-lighbox.js"></script>
Leave a Reply