¿Cómo puedo usar lightGalley.js con varias filas?

Ayuda de LightGallery.js!

¡Hola chicos! He estado luchando durante un tiempo con esta página web que estoy creando para un amigo. Quiero hacer un portafolio de sus fotografías. Estoy usando lightGallery.js para ello, pero desafortunadamente he encontrado algunos problemas en el camino. Aquí está la imagen de cómo se ve ahora .

No más de una fila

Estoy usando Bootstrap para hacer que sea una galería de tipo collage, pero no puedo usar más de una fila.

Si coloco un

dentro del div con el id de lightgallery , el control deslizante de la imagen no se abrirá más. Revisé todos los archivos .js incluidos en el proyecto y ninguno de ellos parecía tener ningún puntero a un elemento con el id de lightGallery .

¿Podría ayudarme a burlar este problema? Gracias de antemano.

Aquí está el fragmento:

 body { background-color: #152836; color: #eee; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif } .img-responsive { width: 100% !important; } .demo-gallery>div { margin: 0; text-align: center; } .row div { padding: 0; } .demo-gallery>div>div a { display: block; overflow: hidden; position: relative; } .demo-gallery>ul>li a>img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); height: 100%; width: 100%; } .demo-gallery>div>div a:hover>img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .demo-gallery>div>div a:hover .demo-gallery-poster>img { opacity: 1; } .demo-gallery>div>div a .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.1); bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background-color 0.15s ease 0s; -o-transition: background-color 0.15s ease 0s; transition: background-color 0.15s ease 0s; } .demo-gallery>div>div a .demo-gallery-poster>img { left: 50%; margin-left: -10px; margin-top: -10px; opacity: 0; position: absolute; top: 50%; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .demo-gallery>div>div a:hover .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.5); } .demo-gallery .justified-gallery>a>img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); height: 100%; width: 100%; } .demo-gallery .justified-gallery>a:hover>img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .demo-gallery .justified-gallery>a:hover .demo-gallery-poster>img { opacity: 1; } .demo-gallery .justified-gallery>a .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.1); bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background-color 0.15s ease 0s; -o-transition: background-color 0.15s ease 0s; transition: background-color 0.15s ease 0s; } .demo-gallery .justified-gallery>a .demo-gallery-poster>img { left: 50%; margin-left: -10px; margin-top: -10px; opacity: 0; position: absolute; top: 50%; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .demo-gallery .justified-gallery>a:hover .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.5); } .demo-gallery .video .demo-gallery-poster img { height: 48px; margin-left: -24px; margin-top: -24px; opacity: 0.8; width: 48px; } 
     ...         <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3" data-responsive="https://sachinchoolur.github.io/lightgallery.js/static/img/13-375.jpg 375, https://sachinchoolur.github.io/lightgallery.js/static/img/13-480.jpg 480, https://sachinchoolur.github.io/lightgallery.js/static/img/13.jpg 800" data-src="https://sachinchoolur.github.io/lightgallery.js/static/img/13-1600.jpg" data-sub-html="

Sunset Serenity

A gorgeous Sunset tonight captured at Coniston Water....

">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" data-responsive="https://sachinchoolur.github.io/lightgallery.js/static/img/4-375.jpg 375, https://sachinchoolur.github.io/lightgallery.js/static/img/4-480.jpg 480, https://sachinchoolur.github.io/lightgallery.js/static/img/4.jpg 800" data-src="https://sachinchoolur.github.io/lightgallery.js/static/img/4-1600.jpg" data-sub-html="

Coniston Calmness

Beautiful morning

">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" data-responsive="https://sachinchoolur.github.io/lightgallery.js/static/img/4-375.jpg 375, https://sachinchoolur.github.io/lightgallery.js/static/img/4-480.jpg 480, https://sachinchoolur.github.io/lightgallery.js/static/img/4.jpg 800" data-src="https://sachinchoolur.github.io/lightgallery.js/static/img/4-1600.jpg" data-sub-html="

Coniston Calmness

Beautiful morning

">
$(document).ready(function() { if ($(window).width() > 992) { var x = $(".col-md-3:nth-child(1)").height(); $(".col-md-3:nth-child(4)").css({ "position": "absolute", "top": x }); } else { $(".col-md-3:nth-child(4)").css({ "position": "relative" }); } }); $(window).resize(function() { if ($(window).width() > 992) { var x = $(".col-md-3:nth-child(1)").height(); $(".col-md-3:nth-child(4)").css({ "position": "absolute", "top": x }); } else { $(".col-md-3:nth-child(4)").css({ "position": "relative", "margin": 0, "padding": 0, "top": 0 }); } });

Está arreglado. La respuesta es mediante el diseño de cuadrícula de CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Intereting Posts