Galería de lightbox responsive con JavaScript puro y CSS3-lightGallery

Vista prévia

Descripción

lightGallery. js es una biblioteca de galería de lightbox JavaScript adaptable, táctil y libre de dependencia que le permite presentar varios tipos de medios (imágenes, vídeos, etc.) en una pantalla completa, escalable, navegable, compartible, descargable y CSS3 animado Galería emergente.

¿Cómo funciona?

Cargue la hoja de estilo de núcleo lightgallery. CSS en la sección head del documento.

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

Cargue el núcleo de JavaScript lightgallery. js y los addons de su elección al final del documento.

<script src="js/picturefill.min.jsf"></script>
<script src="js/lightgallery.js"></script>
<script src="js/lg-pager.js"></script>
<script src="js/lg-autoplay.js"></script>
<script src="js/lg-fullscreen.js"></script>
<script src="js/lg-zoom.js"></script>
<script src="js/lg-hash.js"></script>
<script src="js/lg-share.js"></script>

La estructura HTML requerida para la galería.

<ul id="lightgallery" class="list-unstyled row">

<li data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800"



 data-src="img/1-1600.jpg"



 ata-sub-html="<h4>Image Description</p>"



 data-pinterest-text="Pin it1"



 data-tweet-text="share on twitter 1">



<a href="">




<img class="img-responsive" src="img/thumb-1.jpg">



</a>

</li>

<li data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2.jpg 800"



 data-src="img/2-1600.jpg"



 ata-sub-html="<h4>Image Description</p>"



 data-pinterest-text="Pin it1"



 data-tweet-text="share on twitter 2">



<a href="">




<img class="img-responsive" src="img/thumb-2.jpg">



</a>

</li>

<li data-responsive="img/3-375.jpg 375, img/3-480.jpg 480, img/3.jpg 800"



 data-src="img/3-1600.jpg"



 ata-sub-html="<h4>Image Description</p>"



 data-pinterest-text="Pin it1"



 data-tweet-text="share on twitter 3">



<a href="">




<img class="img-responsive" src="img/thumb-3.jpg">



</a>

</li>
</ul>

Inicialice lightGallery con las opciones predeterminadas.

lightGallery(document.getElementById('lightgallery'));

Todas las opciones de configuración con valores predeterminados.

// 'lg-slide''lg-fade''lg-zoom-in''lg-zoom-in-big''lg-zoom-out''lg-zoom-out-big''lg-zoom-out-in''lg-zoom-in-out''lg-soft-zoom''lg-scale-up''lg-slide-circular''lg-slide-circular-vertical''lg-slide-vertical''lg-slide-vertical-growth''lg-slide-skew-only''lg-slide-skew-only-rev''lg-slide-skew-only-y''lg-slide-skew-only-y-rev''lg-slide-skew''lg-slide-skew-rev''lg-slide-skew-cross''lg-slide-skew-cross-rev''lg-slide-skew-ver''lg-slide-skew-ver-rev''lg-slide-skew-ver-cross''lg-slide-skew-ver-cross-rev''lg-lollipop''lg-lollipop-rev''lg-rotate''lg-rotate-rev''lg-tube'
mode: 'lg-slide',

// Ex : 'ease'
cssEasing: 'ease',

//'for jquery animation'
easing: 'linear',
speed: 600,
height: '100%',
width: '100%',
addClass: '',
startClass: 'lg-start-zoom',
backdropDuration: 150,
hideBarsDelay: 6000,

useLeft: false,

closable: true,
loop: true,
escKey: true,
keyPress: true,
controls: true,
slideEndAnimatoin: true,
hideControlOnEnd: false,
mousewheel: false,

getCaptionFromTitleOrAlt: true,

// .lg-item || '.lg-sub-html'
appendSubHtmlTo: '.lg-sub-html',

subHtmlSelectorRelative: false,

/**
 * @desc number of preload slides
 * will exicute only after the current slide is fully loaded.
 *
 * @ex you clicked on 4th image and if preload = 1 then 3rd slide and 5th
 * slide will be loaded in the background after the 4th slide is fully loaded..
 * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
 *
 */
preload: 1,
showAfterLoad: true,
selector: '',
selectWithin: '',
nextHtml: '',
prevHtml: '',

// 0, 1
index: false,

iframeMaxWidth: '100%',

download: true,
counter: true,
appendCounterTo: '.lg-toolbar',

swipeThreshold: 50,
enableSwipe: true,
enableDrag: true,

dynamic: false,

// An array of objects (src, iframe, subHtml, thumb, poster, responsive, srcset sizes) representing gallery elements.
dynamicEl: [],

galleryId: 1

API methods.

Registro de cambios

v1.1.1 (09/03)

• LG-thumbnail Bug fix