Flavor lightbox

Yet another jQuery lightbox plugin but with taste.

What is Flavor lightbox?

Flavor lightbox is a simple yet efficient and customizable JQuery plugin to showcase your pictures in a modal lightbox.

What do I need to make it work?

You need to link jQuery and the flavor lightbox script at the end of your body tag.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="js/jquery.flavor.js"></script>
</body>

You also need a little stylesheet to display it nicely. Place it in the head of your html file.

<link rel="stylesheet" href="css/flavor-lightbox.css">

How does it work?

You need to specify the source of the full width picture in a data-flavor-src.

If you want to create a gallery just enclose your pictures by a parent tag with an attribute data-flavor="myGalleryName"

Example:

<div data-flavor="myGallery" class="gallery">
  <div data-flavor-src="img/picture01.jpg"><img src="img/picture01_small.jpg" alt="Flavor lightbox tastes great"></div>

  <div data-flavor-src="img/picture02.jpg"><img src="img/picture02_small.jpg" alt="Test left/right arrows to navigate"></div>

  <div class="gallery__item" data-flavor-src="img/picture03.jpg"><img src="img/picture03_small.jpg" alt="You can click to navigate"></div>
  <div class="gallery__item" data-flavor-src="img/picture04.jpg"><img src="img/picture04_small.jpg" alt="Press esc and see ya!"></div>
</div>

To have a more precise look of how it works, go check and inspect the flavor lightbox demo page.

---

If you like this plugin star it, fork it, spread to the world about how awesome this plugin is.