Vanilla biblioteca de JavaScript para Galería de fotos lightbox-PhotoViewerJS

Vista prévia

Descripción

PhotoViewerJS es una biblioteca de JavaScript pura vainilla para mostrar versiones más grandes de miniaturas en una pantalla completa, Galería de lightbox interactiva.

Funcionamiento

Cargue el JavaScript y la hoja de estilos de PhotoViewerJS en su página HTML.

<link rel="stylesheet" href="css/photo.css">
<script src="js/photo.js"></script>

Añade imágenes a tu página web como sigue.

<div id="PhotoGallery" class="photo-gallery">

<figure class="photo-gallery--image">


<a href="images/1.jpg" class="photo" title="Image 1 Description">



<img src="images/1.jpg" alt="Image 1" title="Image 1 Description">


</a>

</figure>

<figure class="photo-gallery--image">


<a href="images/2.jpg" class="photo" title="Image 2 Description">



<img src="images/2.jpg" alt="Image 2" title="Image 2 Description">


</a>

</figure>

<figure class="photo-gallery--image">


<a href="images/3.jpg" class="photo" title="Image 3 Description">



<img src="images/3.jpg" alt="Image 3" title="Image 3 Description">


</a>

</figure>

<figure class="photo-gallery--image">


<a href="images/4.jpg" class="photo" title="Image 4 Description">



<img src="images/4.jpg" alt="Image 4" title="Image 4 Description">


</a>

</figure>

<figure class="photo-gallery--image">


<a href="images/5.jpg" class="photo" title="Image 5 Description">



<img src="images/5.jpg" alt="Image 5" title="Image 5 Description">


</a>

</figure>
</div>

Incluya las siguientes marcas HTML en las páginas que desea que aparezca la galería.

<div id="PhotoViewer" class="photo-viewer">

<header class="photo-viewer--title">


<h1 id="PhotoViewerTitle">Image Title</h1>


<div id="PhotoViewerClose" class="photo-viewer--close"><a href="#">X</a></div>

</header>

<div class="photo-viewer--container">


<figure class="photo-viewer--current-image" id="PhotoViewerCurrentImageContainer">



<img id="PhotoViewerCurrentImage" src="">


</figure>

</div>

<div class="photo-viewer--controls">



<div id="PhotoViewerPreviousImage" class="photo-viewer--previous-image"><a href="#">&laquo; Previous</a></div>



<div id="PhotoViewerCount" class="photo-viewer--count">1/10</div>



<div id="PhotoViewerNextImage" class="photo-viewer--next-image"><a href="#">Next &raquo;</a></div>


</div>
</div>