The Perfundo is a plugin which allows creating a pure CSS image lightbox. It gives you the ability to present single or multiple images in a responsive way. It is an animated library which works when the user clicks on link or image.
This lightbox plugin includes some awesome functions which normally seen in Javascript image lightbox but due to CSS3 latest techniques, it’s now possible to build complex functionality with maximum browser compatibility.
The image lightbox/gallery work when you will click on the thumbnail and it will show you the full version of the photo. The popup/gallery will give the option to view next/previous image. it also has a close button on the right top which allows closing the gallery.
How to use it:
Add the files to your HTML file like in the following example:
<!-- Put this inside the <head> section of your HTML. -->
<link rel="stylesheet" href="perfundo.min.css">
<!-- Put this before the closing </body> tag (optionally!). -->
<script src="perfundo.min.js"></script>
<script>
perfundo('.perfundo');
</script>After adding the files, you need to add the HTML which is simple. Let’s have a look at the code example of a single image below:
<div class="perfundo">
<a class="perfundo__link" href="#perfundo-single2">
<img src="img/img-single_s.jpg" alt="Demo image">
</a>
<div id="perfundo-single2" class="perfundo__overlay fadeInLeft">
<figure class="perfundo__content perfundo__figure">
<img src="img/img-single_s.jpg" alt="Demo image">
<div class="perfundo__image" style="width: 800px; padding-top: 56.25%; background-image: url(img/img-single.jpg);"></div>
<figcaption class="perfundo__figcaption">Single image with caption</figcaption>
</figure>
<a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>
</div>
</div>The perfundo is the main container class which holds the rest of HTML. The thumbnail photo added inside the ahref and the bigger version is added under the perfundo-single2 class.
If you want to open a lightbox with content and don’t want to use the image then here is the code example.
<div class="perfundo">
<a class="perfundo__link" href="#perfundo-content">
Open the lightbox...
</a>
<div id="perfundo-content" class="perfundo__overlay bounceIn">
<div class="perfundo__content perfundo__html">
<h5>Lorem Ipsum</h5>
<p>Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur.</p>
</div>
<a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>
</div>
</div>To add the multiple photos and make it work like a gallery, you need to define unique id for child div of the main wrapper. As you see in below example, it uses the perfundo-img1 and perfundo-img2
Also, make sure to define hashtag in the link of a thumbnail.
<div class="perfundo">
<a class="perfundo__link" href="#perfundo-img1">
<img src="img/img1_s.jpg" alt="Demo image">
</a>
<div id="perfundo-img1" class="perfundo__overlay fadeIn">
<figure class="perfundo__content perfundo__figure">
<img src="img/img1_s.jpg" alt="Demo image">
<div class="perfundo__image" style="width: 800px; padding-top: 66.25%; background-image: url(img/img1.jpg);"></div>
</figure>
<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">
<a class="perfundo__link" href="#perfundo-img2">
<img src="img/img2_s.jpg" alt="Demo image">
</a>
<div id="perfundo-img2" class="perfundo__overlay fadeIn">
<figure class="perfundo__content perfundo__figure">
<img src="img/img2_s.jpg" alt="Demo image">
<div class="perfundo__image" style="width: 800px; padding-top: 66.25%; background-image: url(img/img2.jpg);"></div>
</figure>
<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>