Yet another jQuery lightbox plugin but with taste.
Flavor lightbox is a simple yet efficient and customizable JQuery plugin to showcase your pictures in a modal lightbox.
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">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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent