https://github.com/istuffs/flavor-lightbox

:bulb: Simple jQuery plugin lightbox.
https://github.com/istuffs/flavor-lightbox

jquery lightbox

Last synced: about 1 month ago
JSON representation

:bulb: Simple jQuery plugin lightbox.

• Host: GitHub
• URL: https://github.com/istuffs/flavor-lightbox
• Owner: iStuffs
• Created: 2017-11-22T19:23:47.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-18T05:51:55.000Z (almost 7 years ago)
• Last Synced: 2024-12-08T09:33:55.151Z (about 1 month ago)
• Topics: jquery, lightbox
• Language: CSS
• Homepage: https://istuffs.github.io/flavor-lightbox/
• Size: 30.2 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.html

Awesome Lists containing this project

README

        


	

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.