Author: | maoberlehner |
---|---|
Views Total: | 1,615 views |
Official Page: | Go to website |
Last Update: | August 16, 2018 |
License: | MIT |
Preview:

Description:
Perfundo is a pure CSS lightbox library which present your single or multiple images in a responsive, animated lightbox / gallery popup.
How to use it:
First you need to load the Perfundo.css (without icons) or perfundo-icons.css (with icons) into your html page.
<link href="dist/perfundo-icons.css" rel="stylesheet">
Create a single image lightbox like this:
<div class="perfundo"> <style> #perfundo-single:target:before{background-image:url(large.jpg);} </style> <a class="perfundo__link" href="#perfundo-single"> <img src="small.jpg"> </a> <div id="perfundo-single" class="perfundo__overlay"> <a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a> </div> </div>
Create a gallery lightbox like this:
<div class="perfundo"> <style>#perfundo-img1:target:before{background-image:url(1.jpg);}</style> <a class="perfundo__link" href="#perfundo-img1"> <img src="1.jpg"> </a> <div id="perfundo-img1" class="perfundo__overlay"> <a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a> <a class="perfundo__next perfundo__control" href="#perfundo-img2">Next</a> </div> </div> <div class="perfundo"> <style>#perfundo-img2:target:before{background-image:url(2.jpg);}</style> <a class="perfundo__link" href="#perfundo-img2"> <img src="2.jpg"> </a> <div id="perfundo-img2" class="perfundo__overlay"> <a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a> <a class="perfundo__next perfundo__control" href="#perfundo-img3">Next</a> <a class="perfundo__prev perfundo__control" href="#perfundo-img1">Prev</a> </div> </div> <div class="perfundo"> <style>#perfundo-img3:target:before{background-image:url(3.jpg);}</style> <a class="perfundo__link" href="#perfundo-img3"> <img src="3.jpg"> </a> <div id="perfundo-img3" class="perfundo__overlay"> <a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a> <a class="perfundo__prev perfundo__control" href="#perfundo-img2">Prev</a> </div> </div>
You can also open an image lightbox through an inline link.
<a href="#perfundo-single">Open an image lightbox</a>
Changelog:
08/16/2018
- v4.0.4