jQuery Simple and Clean Image Lightbox

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

Share this:

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

Demo Download

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>