Galería de fotos adaptable con JavaScript puro

Vista prévia

Descripción

Una galería de JavaScript pura que le ayuda a mostrar sus imágenes con miniaturas y flechas de navegación. Totalmente sensible y móvil táctil amigable.

Funcionamiento

Cargue la hoja de estilos Gallery. min. CSS en la sección head del documento.

<link rel="stylesheet" href="dist/css/gallery.min.css">

Añade tus imágenes & miniaturas a la Página Web de la siguiente manera:

<div id="mygallery" class="gallery">

<div class="images">


<div class="active" style="background-image: url(img/01.jpg)"></div>


<div style="background-image: url(img/02.jpg)"></div>


<div style="background-image: url(img/03.jpg)"></div>


<div style="background-image: url(img/04.jpg)"></div>


<span class="left"></span>


<span class="right"></span>

</div>

<div class="thumbs">


<div class="active" style="background-image: url(img/01.jpg)"></div>


<div style="background-image: url(img/02.jpg)"></div>


<div style="background-image: url(img/03.jpg)"></div>


<div style="background-image: url(img/04.jpg)"></div>

</div>
</div>

Cargue el martillo. js para la compatibilidad con gestos táctiles.

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script>

Cargue el script Gallery. min. js en la parte inferior de la Página Web.

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

Inicializar la galería.

;(function () {

'use strict';

Gallery.init(document.getElementById('mygallery'));
}());