Crear rejilla de miniaturas con expandir previsualización de imagen utilizando Gallerly. js

Vista prévia

Descripción

Gallerly. js es una galería de fotos de JavaScript puro que le permite crear una cuadrícula en miniatura con una vista previa de imagen grande en expansión como se ve en la búsqueda de imágenes de Google.

Funcionamiento

Cargue la hoja de estilos necesaria gallerly. CSS en la sección Head de la Página Web.

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

Cree una rejilla de miniaturas siguiendo la estructura de marcas de este modo:

<div id="gallerly" class="container">

<div class="image-viewer">


<a class="thumbnail">



<img src="images/1.jpg" data-title="Title" data-description="More Description"/>


</a>


<a class="thumbnail">



<img src="images/2.jpg" data-title="Title" data-description="More Description"/>


</a>


<a class="thumbnail">



<img src="images/3.jpg" data-title="Title" data-description="More Description"/>


</a>


<div class="preview hide">



<div class="wrapper">




<span class="arrow"></span>




<a class="prev">&larr; Prev</a>




<div class="preview-content">





<img src="" />





<div class="content">






<h3 class="title"></h3>






<span class="description"></span>





</div>




</div>




<a class="next">Next &rarr;</a>




<a class="close-preview">Close</a>



</div>

</div>
</div>

Cargue el gallerly. js en la parte inferior de la Página Web.

<script src="js/gallerly.js"></script>

Inicializar la rejilla en miniatura.

var $gallerly = document.querySelector("#gallerly");
var gallerly = new Gallerly($gallerly);