Lightbox polivalente y adaptable en Pure CSS-Leaf-lightbox

Vista prévia

Descripción

Leaf-LightBox es una pequeña librería CSS usada para crear un hermoso lightbox responsive para imágenes, texto y videos. Sin JavaScript ni Framework.

Funcionamiento

Incluya el archivo CSS principal leafbox. CSS en la sección Head de la Página Web.

<link type="text/css" rel="stylesheet" href="leafbox.css"/>

Incluya un tema CSS de su elección como sigue:

<link rel="stylesheet" href="dist/theme/white.css"/>
<link rel="stylesheet" href="dist/theme/default.css"/>

Cree un cuadro de luz de imagen básico con una animación se descolora. Todas las animaciones disponibles:

• Se descolora
• Rebote
• dar la vuelta

<a href="#img1">

<img src="1.jpg"/>
</a>

<figure id="img1" class="lbox Se descolora">

 <img src="1.jpg"/>

 <a href="#_"></a>
</figure>

Muestra vídeos de YouTube o Vimeo en el lightbox.

<a class="btn" href="#vid1">youtube</a>
<a class="btn" href="#vid2">vimeo</a>

<div id="vid1" class="lbox dar la vuelta">

 <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 Rebote">

 <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>

Muestre un cuadro de luz con texto personalizado haciendo clic en un vínculo de desencadenador.

<a class="btn" href="#text1">Click Me</a>
<div id="text1" class="lbox Rebote">

 <div class="text">



 Text Here

 </div>

 <a href="#_"></a>
</div>