Super Lightweight jQuery Responsive Image Lightbox Plugin - Lbox

File Size: 482 KB
Views Total: 963
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>

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...');

  $('<img src="'+ url +'">').load(function() {

function hideLbox() {

$(function() {
  $(".lboxImg").click(function () {

  $("#lbox").click(function () {

  $(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.