Twitter Bootstrap Question posted in

How can I use lightGalley.js with multiple rows?-Twitter bootstrap

LightGallery.js help!

Hello guys!
I have been stuggling for a while with this web page I’m creating for a friend. I want to make a portfolio of his photographs. I am using lightGallery.js for it but unfortunately I have encountered some issues on the way.
Here’s the image of how it looks right now.

No more than one row

I am using Bootstrap to make it a collage-like gallery but I cannot use more than one row.

<div class="demo-gallery">

<div class="row" id="lightgallery">
  <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="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
    <a href="">
      <img class="img-responsive" src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-1.jpg">
      <div class="demo-gallery-poster">
        <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
      </div>
    </a>
  </div> ...

If I put a <div class="row"> inside the div with the id of lightgallery, the image slider won’t open up any more.
I checked all of the .js files included in the project and none of them seemed to have any pointers to an element with the lightGallery id.

Could you help me outsmart this problem? Thank you in advance.

Here is the snippet:

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;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>...</title>


  <link rel='stylesheet' href='https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css'>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


</head>

<body>

  <div class="demo-gallery">

    <div class="row" id="lightgallery">
      <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="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
        <a href="">
          <img class="img-responsive" src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-1.jpg">
          <div class="demo-gallery-poster">
            <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
          </div>
        </a>
      </div>
      <!-- -->

      <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="<h4>Bowness Bay</h4><p>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....</p>">
        <a href="">
          <img class="img-responsive" src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-2.jpg">
          <div class="demo-gallery-poster">
            <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
          </div>
        </a>
      </div>
      <!-- -->
      <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="<h4>Sunset Serenity</h4><p>A gorgeous Sunset tonight captured at Coniston Water....</p>">
        <a href="">
          <img class="img-responsive" src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-13.jpg">
          <div class="demo-gallery-poster">
            <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
          </div>
        </a>
      </div>
      <!-- -->
      <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="<h4>Coniston Calmness</h4><p>Beautiful morning</p>">
        <a href="">
          <img class="img-responsive" src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-4.jpg">
          <div class="demo-gallery-poster">
            <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
          </div>
        </a>
      </div>
      <!-- -->

      <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="<h4>Coniston Calmness</h4><p>Beautiful morning</p>">
        <a href="">
          <img class="img-responsive" src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-4.jpg">
          <div class="demo-gallery-poster">
            <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
          </div>
        </a>
      </div>
    </div>
    <!-- -->
  </div>


  <script src='https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js'></script>
  <script src='https://cdn.rawgit.com/sachinchoolur/lg-pager.js/master/dist/lg-pager.js'></script>
  <script src='https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js'></script>
  <script src='https://cdn.rawgit.com/sachinchoolur/lg-share.js/master/dist/lg-share.js'></script>
  <script src='https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js'></script>
  <script src='https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js'></script>
  <script src='https://cdn.rawgit.com/sachinchoolur/lg-hash.js/master/dist/lg-hash.js'></script>
  <script src='https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  <script src="js/index.js"></script>
  <script>
    $(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
        });
      }
    });
  </script>

</body>

</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It is fixed. The answer is by using the CSS Grid Layout. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout


  2. 0 
    <!DOCTYPE html>
<html>

    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></script>
  
  
        <link rel="stylesheet" type="text/css" href="https://antelove.com/plugins/lightbox/lightgallery/css/lightgallery.css" />

    </head>

    <body>

        <div id="lightgallery">

            <a href="http://sachinchoolur.github.io/lightGallery/static/img/1.jpg">
                <img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg" />
            </a>
            <a href="http://sachinchoolur.github.io/lightGallery/static/img/2.jpg">
                <img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-2.jpg" />
            </a>
            <a href="http://sachinchoolur.github.io/lightGallery/static/img/3.jpg">
                <img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-3.jpg" />
            </a>
            <a href="http://sachinchoolur.github.io/lightGallery/static/img/4.jpg">
                <img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-4.jpg" />
            </a>
            <a href="http://sachinchoolur.github.io/lightGallery/static/img/5.jpg">
                <img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-5.jpg" />
            </a>
            <a href="http://sachinchoolur.github.io/lightGallery/static/img/6.jpg">
                <img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-6.jpg" />
            </a>

        </div>
      
      
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      
      
        <script src="https://antelove.com/plugins/lightbox/lightgallery/js/lightgallery-all.js"></script>
      
        <script type="text/javascript">

            $(document).ready(function() {
                $("#lightgallery").lightGallery({
                    thumbnail: true,
                    selector: "a"
                }); 
            });

        </script>
      

    </body>

</html>

    codepen full

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search