Galería de imágenes de CSS Pure lightbox-Octo

Vista prévia

Descripción

Octo es una solución CSS/CSS3 pura para ampliar y mostrar imágenes agrupadas en un lightbox con navegación de flechas siguiente/anterior.

Funcionamiento

Cargue el Octo. CSS en la sección Head de su página web.

<link href="css/octo.css" rel="stylesheet">

Agrega un grupo de imágenes en tu página HTML.

<div id="thumblist">




<a href="#image1">


 <img src="thumb-1" class="thumb"/>

</a>







<div id="image1" class="lightbox">






 <a href="#_">



 <img src="thumb-1" />






 </a>






<a href="#_">



<img src="close.png" class="exit"/><!--exit button-->


</a>






<a href="#image2">



<img src="right.png" class="next"/><!--next button-->


</a>





</div>




<a href="#image2">


<img src="2.jpg" class="thumb" /><!--left arrow button-->

</a>




<div id="image2" class="lightbox">




<a href="#image1">



<img src="left.png" class="previous"/>


</a>






<a href="#_">



<img src="2.jpg" />


</a>






<a href="#_">



<img src="close.png" class="exit"/>


</a>






<a href="#image3">



<img src="right.png" class="next"/>


</a>





</div>




<a href="#image3">


<img src="3.jpg" class="thumb" />

</a>




<div id="image3" class="lightbox">






<a href="#image2">



<img src="left.png" class="previous"/>


</a>






<a href="#_">



<img src="3.jpg" />



<p class="description">




You can even add image descriptions.



</p>


</a>






<a href="#_">



<img src="close.png" class="exit"/>


</a>





</div>
</div>