Super Lightweight jQuery Responsive Image Lightbox Plugin - Lbox

A minimalist jQuery plugin to create a responsive image lightbox with support for image lazy loading.

How to use it:

1. Include the necessary jQuery Javascript library in your document's head section.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

2. Insert an image into your document. Use the data-full-url attribute to specify the large version of this image that will be displayed in the lightbox.

<img src="thumb.jpg" class="lboxImg" data-full-url="full.jpg">

3. Create the container for the image lightbox.

<div id="lbox" style="display: none;">
  <div id="lboxinner"> </div>
</div>

4. The CSS to style the image lightbox.

.lboxImg { cursor: pointer; }

#lbox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
}

#lboxinner {
  color: #fff;
  font-weight: bold;
  position: relative;
  top: 7.5%;
  width: 85%;
  height: 85%;
  overflow: auto;
  margin: 0 auto;
  text-align: center;
}

4. The Javascript to active the plugin.

function showLbox(url) {
  $("#lboxinner").html('Loading image...');
  $("#lbox").show(300);

  $('<img src="'+ url +'">').load(function() {
    $("#lboxinner").html('');
    $(this).appendTo('#lboxinner');
  });
}

function hideLbox() {
  $("#lboxinner").html('');
  $("#lbox").hide(300);
}

$(function() {
  $(".lboxImg").click(function () {
    showLbox($(this).data('full-url'));
  });

  $("#lbox").click(function () {
    hideLbox();
  });

  $(document).keyup(function (e) {
    if (e.keyCode == 27) hideLbox();
  });
});

---

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