Basic Responsive Lightbox Plugin For Images - simple-lightbox

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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="./jquery.simple-lightbox.js"></script>

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

$(function() {
  $('body').simpleLightbox();
});

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" />
  ...
</div>

$(function() {
  $('.container').simpleLightbox();
});

4. Set the trigger element.

$('body').simpleLightbox({
  trigger: 'img'
});

5. Set the attribute which holds the image path.

$('body').simpleLightbox({
  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%);
}

Changelog:

2018-11-16

• ascii text added

2018-11-05

• 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.