Basic Responsive jQuery Image LightBox Plugin - kloptikus lightbox

Yet another super mini jQuery plugin to create an overlay with the large image for your image gallery. The plugin has the ability to always center the lightbox in the screen to keep it readable on any devices.

How to use it:

1. Include the jQuery javascript library on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Add links to your images and wrap them in a container.

<ul id="imageGallery">
<li><a href="images/large-1.png"><img src="images/small-1.png" alt="Alt 1"></a></li>
<li><a href="images/large-2.png"><img src="images/small-2.png" alt="Alt 2"></a></li>
<li><a href="images/large-3.png"><img src="images/small-3.png" alt="Alt 3"></a></li>
...
</ul>

3. The required CSS for the lightbox.

#overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
margin-top: 10%;
}
#overlay p {
color: white;
}

4 To enable the plugin, just add the following javascript snippets in your existing JS file or include the app.js in your document directly.

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

//An image
$overlay.append($image);

//Add overlay
$("body").append($overlay);

//A caption
$overlay.append($caption);

//Capture and click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  //Update overlay with the image linked in the link
  $image.attr("src", imageLocation);
  
  //Show the overlay
  $overlay.show();
  
  //Get child's alt attribute and set caption
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);
});
  

//When overlay is clicked
$overlay.click(function() {
  //Hide the overlay
  $overlay.hide();
});

---

This awesome jQuery plugin is developed by kloptikus. For more Advanced Usages, please check the demo page or visit the official website.