Simple Image Modal Window Plugin - jQuery Flavor Lightbox

Flavor Lightbox is a simple yet efficient, and customizable JQuery plugin to showcase your pictures in a responsive modal lightbox. You can also navigate between these images using arrow keys just like the gallery lightbox.

How to use it:

1. Create the basic html structure for the lightbox.

<div class="overlay" id="flavorOverlay"></div>
<div id="flavorLightbox">
  <div id="flavorLightboxClose">&times;</div>
  <img src="1.jpg" alt="">
  <div class="thumbnails"></div>
</div>

2. Create an image gallery on the web page following the html structure like this:

<div data-flavor="myGallery" class="gallery">
  <div class="gallery__item" data-flavor-src="1.jpg"><img src="1.jpg" alt=""></div>
  <div class="gallery__item" data-flavor-src="2.jpg"><img src="2.jpg" alt=""></div>
  <div class="gallery__item" data-flavor-src="3.jpg"><img src="3.jpg" alt=""></div>
  <div class="gallery__item" data-flavor-src="4.jpg"><img src="4.jpg" alt=""></div>
  <div class="gallery__item" data-flavor-src="5.jpg"><img src="5.jpg" alt=""></div>
  <div class="gallery__item" data-flavor-src="6.jpg"><img src="6.jpg" alt=""></div>
</div>

3. Include jQuery JavaScript library and the jquery.flavor.js script at the bottom of the web page.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.flavor.js"></script>

4. Initialize the jQuery Flavor Lightbox plugin.

$('.gallery').flavor();

5. The primary CSS styles for the modal lightbox.

#flavorOverlay {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
}

#flavorLightbox { display: none; }

#flavorLightbox > img {
  max-width: 90%;
  max-height: 90%;
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

#flavorLightboxClose {
  font-size: 32px;
  cursor: pointer;
  color: #fff;
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 666;
}

Change log:

2018-01-15

• JS & CSS Update

---

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