Mobile-first Image Gallery & Lightbox Plugin - Ribbon Gallery

Ribbon Gallery is an ultra-small jQuery plugin to create a horizontal, mobile-first, touch-enabled image swiper where the users can enlarge and display images in a lightbox popup.

How to use it:

1. Link to jQuery JavaScript library and the Ribbon Gallery plugin's files.

<link rel="stylesheet" href="/path/to/ribbon-gallery.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/ribbon-gallery.min.js"></script>

2. Wrap your image group in a container with the CSS class of ribbon-gallery. That's it.

<div class="ribbon-gallery">
  <img src="1.jpg" alt="placeholder">
  <img src="2.jpg" alt="placeholder">
  <img src="3.jpg" alt="placeholder">
  <img src="4.jpg" alt="placeholder">
  <img src="5.jpg" alt="placeholder">
  ...
</div>

3. Override the default styles of the image lightbox.

.substrate {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  display: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.substrate-bg {
  background: rgba(0, 0, 0, .9);
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
}

---

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