如何将lightGalley.js与多行一起使用？

时间：2017-11-04 10:27:03

标签： javascript jquery html css twitter-bootstrap

LightGallery.js帮忙！

大家好！ 我正在为这个我正在为朋友创作的网页打扰一段时间。我想制作他的照片组合。我正在使用lightGallery.js但不幸的是我在途中遇到了一些问题。 Here's the image of how it looks right now

不超过一行

我正在使用Bootstrap使其成为类似拼贴画的画廊，但我不能使用多行。

<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="row">放入ID为 lightgallery 的div中，则图片滑块将不会再打开。 我检查了项目中包含的所有 .js 文件，但似乎没有任何指针指向 lightGallery id的元素。

你可以帮我解决这个问题吗？提前谢谢。

以下是摘录：

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>

2 个答案:

答案 0 :(得分：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

答案 1 :(得分：-1)

它是固定的。答案是使用CSS网格布局。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

相关问题
最新问题