Responsive Image Lightbox With jQuery And CSS Flexbox - LiteBox

LiteBox is a jQuery plugin to create a fully responsive gallery where the users can enlarge and display full images in an unobtrusive lightbox popup.

Based on modern HTML5 tags (figure, picture, figcaption) and CSS flexbox model.

How to use it:

1. Load the stylesheet jquery.litebox.gallery.css for the basic styling of the gallery.

<link rel="stylesheet" href="/dist/jquery.litebox.gallery.css" />

2. Load the stylesheet jquery.litebox.css for the image lightbox.

<link rel="stylesheet" href="/dist/jquery.litebox.css" />

3. Add images to the gallery.

<div class="gallery">
  <figure class="photo">
    <a href="1.jpg">
      <picture>
        <source srcset="1.jpg 2x"/>
        <img src="1.jpg"/>
      </picture>
    </a>
    <figcaption>Using picture element</figcaption>
  </figure>
  <figure class="photo">
    <a href="2.jpg" class="thumbnail">
      <img src="2.jpg"/>
    </a>
    <figcaption>Using img element</figcaption>
  </figure>
  <figure class="photo">
    <a href="3.jpg" class="thumbnail">
      <img src="3.jpg"/>
    </a>
    <figcaption>Custom caption here</figcaption>
  </figure>
</div>

4. Include jQuery library and the LiteBox plugin at the bottom of the page.

<script src="/path/to/jquery.min.js"></script>
<script src="/dist/jquery.litebox.js"></script>

5. Call the function on the image links. That's it.

jQuery(function($) {
  $('figure.photo a').litebox();
});

6. Modify & override the styles of the image lightbox.

.litebox.overlay {
  background: rgba(0, 0, 0, 0.96);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1em;
}

.litebox.overlay img {
  flex-shrink: 1;
  max-width: 100%;
  max-height: 100%;
}

---

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