Fácil imagen lightbox con integración Slider-lightbox. js

Vista prévia

Descripción

Lightbox. js es una librería de lightbox JavaScript libre de dependencias que le proporciona una forma elegante de ver imágenes grandes.

Características

• Al hacer clic en la miniatura se mostrarán todas las imágenes agrupadas en un lightbox de la galería.
• Auto genera iconos de zoom en las miniaturas.
• Permite deslizarse a través de las imágenes a través de flechas de navegación y flechas de teclado.
• Cargador de imágenes.
• Diseño adaptable y tacto amigable.

Funcionamiento

Cargue la hoja de estilo de núcleo lightbox. CSS en el encabezado y el archivo de JavaScript lightbox. js justo antes de la etiqueta body de cierre.

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

Envolver las miniaturas en un enlaces que apuntan a las imágenes grandes.

<a href="1.jpg" class="lightbox" title="">

<img src="thumb-1.jpg" alt="Thumbnail 1">
</a>

<a href="2.jpg" class="lightbox" title="">

<img src="thumb-2.jpg" alt="Thumbnail 2">
</a>

<a href="3.jpg" class="lightbox" title="">

<img src="thumb-3.jpg" alt="Thumbnail 1">
</a>

Inicializa la lightbox como esta:

lightbox('.lightbox');

Para personalizar el lightbox, simplemente pase el objeto option como el segundo parámetro a la función lightbox.

lightbox('.lightbox',{
// Display captions, if available.
captions: true,

// Set the element where the caption is. Set it to "self" for the a-tag itself
captionsSelector: "self",

// Get the caption from given attribute.
captionAttribute: "title",

// Display navigation buttons. "auto" hides buttons on touch-enabled devices.
nav: "auto",

// Text or HTML for the navigation buttons.
navText: ["‹", "›"],

// Display close button.
close: true,

// Text or HTML for the close button.
closeText: "×",

// Display current image index
counter: true,

// Allow keyboard navigation.
keyboard: true,

// Display zoom icon.
zoom: true,

// Text or HTML for the zoom icon
zoomText: "+",

// Closes the lightbox when clicking outside
docClose: false,

// Swipe up to close lightbox
swipeClose: true,

// Hide scrollbars if lightbox is displayed.
scroll: false
});