Simplest Responsive jQuery Image Lightbox Plugin - simple-lightbox

File Size: 5.61 KB
Views Total: 11441
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simplest Responsive jQuery Image Lightbox Plugin - simple-lightbox

A minimalist jQuery image lightbox plugin which enables the user to view large, high solution pictures in a responsive, fullscreen, closable modal popup. You can close the image lightbox by pressing the close button or clicking anywhere on the background overlay. 

How to use it:

1. Add jQuery JavaScript library and the jQuery simple-lightbox plugin's script to your webpages.

<script src="//"></script>
<script src="dist/simple-lightbox.min.js"></script>

2. Call the function simpleLightBox() on the img tag and done.


3. The required CSS to style the image lightbox. Change, override and add the CSS styles as shown below to your html page or include the stylesheet simple-lightbox.min.css directly in the document's head section.

body { position: relative; }

#close-lightbox {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 40px;
  color: #FFF;
  cursor: pointer;

#lightbox-image {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  max-width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

#lightbox-image-wrapper {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;

#lightbox-wrapper {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
} { display: block; }

.smp-lightbox {
  cursor: pointer;
  cursor: -moz-zoom-in;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;

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