jQuery and CSS Popup Image Lightbox

Popup Lightbox Main Features

• Simple, clean, light weight and fast.
• Responsive and attractive design
• Detect next and previous images.
• Show status (numbering) for each image.
• Popup window show the caption of the image detected from alt text.
• Animate CSS animations supported.
• Font Awesome Icons for lightbox.

jQuery Lightbox Popup Window Example

Select any image to view the lightbox Popup window.

How to use Popup Lightbox

The popup lightbox is very easy to use in your web projects. The main purpose to develop this lightbox is show images in easy and simple way.
There is no tough job to get it working. Just follow the step by step guide to done.

1. Include the popup lightbox javascript and css file into your web project.

<!--Popup Lightbox Js-->
<script src="js/jquery.popup.lightbox.js"></script>

<!--Popup Lightbox CSS-->
<link href="css/popup-lightbox.css" rel="stylesheet" />

2. Create a image container, whose images should be shown in the popup lightbox. (Optional if you are going to create a gallery).

<div class="img-container">
<img src="images/jquery-lightbox-image2.jpg" alt="lightbox image 2" />
<img src="images/jquery-lightbox-image3.jpg" alt="lightbox image 3"/>
<img src="images/jquery-lightbox-image1.jpg" alt="Effel Tower"/>
<img src="images/jquery-lightbox-image4.jpg" alt="lightbox image 4" />
</div>

3. Now, initialize the "popupLightbox()" in jQuery document ready function with the selector whose images will be show.

$(document).ready(function(){

$(".img-container").popupLightbox();

}); 

4. Now you have done! no need to build HTML or any extra tag. It will be automatically done by popup lightbox plugin.

Note: You can also call the plugin with body selector to show all body images. Similarly, you can use it to show article images.