Biblioteca de JavaScript para visualizar imágenes en diapositivas de fotos-gllryjs

Vista prévia

Descripción

gllryjs es una sencilla biblioteca HTML/JavaScript para visualizar imágenes en el modo de diapositivas de fotos con algunas extensiones agradables:

• pan rallado para rastrear la imagen actual y fácil acceso a la diapositiva especificada.
• atajos de teclado para la diapositiva anterior/siguiente.
• modo de pantalla completa aka soporte de superposición.
• reproducción automática con intervalo configurable.
• varias acciones que se pueden colocar sobre una diapositiva específica.
• soporte de deslizamiento para dispositivos móviles.
• diapositiva infinita.
• animaciones predefinidas al cambiar las imágenes.
• títulos automáticos de las imágenes en función de su atributo alt.

¿Cómo funciona?

Cargue el JavaScript y la hoja de estilo de Gllry en la página HTML.

<script src="path/to/gllry.js"></script>
<link rel="stylesheet" href="path/to/gllry.css">

Cree una lista de imágenes como sigue.

<div id="gllry" class="gllry size">

<ul>


<li>



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


</li>


<li>



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


</li>


<li>



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


</li>


<li>



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


</li>


<li>



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


</li>

</ul>
</div>

Cree una nueva instancia.

window.addEventListener('load', function(){

window.gllry = new Gllry('gllry', {


breadcrumbs:true,


autoPlay:3000,


headings:true,


action: {



text: 'Signup',



callback: function(){gllry.hide()},



timeout:0


},


animate:true

});
});