Basic Responsive Lightbox Plugin For Images - simple-lightbox

Basic Responsive Lightbox Plugin For Images - simple-lightbox
File Size: 5.78 KB
Views Total: 4712
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A lightweight and easy-to-implement jQuery plugin used to create a responsive, position-fixed lightbox popup for all images found within the document.

How to use it:

1. Link to jQuery library and the simple-lightbox plugin's files.

<link rel="stylesheet" href="./jquery.simple-lightbox.css">
<script src="" 
<script src="./jquery.simple-lightbox.js"></script>

2. Enable the lightbox plugin on all images within the document.

$(function() {

3. Or within a specific container.

<div class="container">
  <img src="1.jpg" alt="Image" />
  <img src="2.jpg" alt="Image" />
  <img src="3.jpg" alt="Image" />
$(function() {

4. Set the trigger element.

  trigger: 'img'

5. Set the attribute which holds the image path.

  source: 'src'

6. Override the default CSS to create your own styles.

.sl-wrapper {
  background-color: rgba(0,0,0,0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 99;

.sl-wrapper .sl-content {
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20px;
  max-width: 100%;
  width: 80vh;
  display: block;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);



  • ascii text added


  • Improved closing lightbox by click

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