Author: | zkreations |
---|---|
Views Total: | 2,978 views |
Official Page: | Go to website |
Last Update: | June 9, 2016 |
License: | MIT |
Preview:

Description:
Leaf-Lightbox is a tiny CSS library used to create a beautiful responsive lightbox for images, text, and videos. Without any JavaScript and framework.
How to use it:
Include the core CSS file leafbox.css in the head section of the webpage.
<link type="text/css" rel="stylesheet" href="leafbox.css"/>
Include a theme CSS of your choice as follow:
<link rel="stylesheet" href="dist/theme/white.css"/> <link rel="stylesheet" href="dist/theme/default.css"/>
Create a basic image lightbox with a fade animation. All available animations:
- fade
- bounce
- flip
<a href="#img1"> <img src="1.jpg"/> </a> <figure id="img1" class="lbox fade"> <img src="1.jpg"/> <a href="#_"></a> </figure>
Display Youtube or Vimeo videos in the lightbox.
<a class="btn" href="#vid1">youtube</a> <a class="btn" href="#vid2">vimeo</a> <div id="vid1" class="lbox flip"> <div class="vid"> <iframe src="https://www.youtube.com/embed/m96tYpEk1Ao?autoplay=0&autohide=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <a href="#_"></a> </div> <div id="vid2" class="lbox bounce"> <div class="vid"> <iframe src="https://player.vimeo.com/video/68536792?title=0&byline=0&portrait=0" frameborder="0" allowfullscreen></iframe> </div> <a href="#_"></a> </div> </div>
Display a lightbox with custom text by clicking a trigger link.
<a class="btn" href="#text1">Click Me</a> <div id="text1" class="lbox bounce"> <div class="text"> Text Here </div> <a href="#_"></a> </div>
Thank you for including credits