Comment utiliser lightGalley.js avec plusieurs lignes?

Aide LightGallery.js!

Bonjour les gars! Je lutte depuis un moment avec cette page Web que je crée pour un ami. Je veux faire un portfolio de ses photographies. J’utilise lightGallery.js pour cela, mais malheureusement, j’ai rencontré quelques problèmes en chemin Voici l’image à quoi ça ressemble en ce moment .

Pas plus d’une rangée

J’utilise Bootstrap pour en faire une galerie semblable à un collage, mais je ne peux pas utiliser plus d’une ligne.

  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" data-responsive="https://sachinchoolur.github.io/lightgallery.js/static/img/1-375.jpg 375, https://sachinchoolur.github.io/lightgallery.js/static/img/1-480.jpg 480, https://sachinchoolur.github.io/lightgallery.js/static/img/1.jpg 800" data-src="https://sachinchoolur.github.io/lightgallery.js/static/img/1-1600.jpg" data-sub-html="Fading Light
Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.
">     
  
 ...

Si je mets une

à l’intérieur de la div avec l’id de lightgallery , le curseur de l’image ne s’ouvrira plus. J’ai vérifié tous les fichiers .js inclus dans le projet et aucun d’entre eux ne semblait avoir de pointeur sur un élément portant l’identifiant lightGallery .

Pourriez-vous m’aider à déjouer ce problème? Merci d’avance.

Voici l’extrait de code:

 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-6 col-md-3 col-lg-3" data-responsive="https://sachinchoolur.github.io/lightgallery.js/static/img/1-375.jpg 375, https://sachinchoolur.github.io/lightgallery.js/static/img/1-480.jpg 480, https://sachinchoolur.github.io/lightgallery.js/static/img/1.jpg 800" data-src="https://sachinchoolur.github.io/lightgallery.js/static/img/1-1600.jpg" data-sub-html="Fading Light
Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.
">     
  
  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" data-responsive="https://sachinchoolur.github.io/lightgallery.js/static/img/2-375.jpg 375, https://sachinchoolur.github.io/lightgallery.js/static/img/2-480.jpg 480, https://sachinchoolur.github.io/lightgallery.js/static/img/2.jpg 800" data-src="https://sachinchoolur.github.io/lightgallery.js/static/img/2-1600.jpg" data-sub-html="Bowness Bay
A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....
">     
  
  <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 }); } });