javascript - Bootstrap LightBox Gallery 包含许多相册-6ren

javascript - Bootstrap LightBox Gallery 包含许多相册

转载作者：行者123 更新时间：2023-11-28 03:24:26

我想在我的图库网页中使用此代码，问题是当一张相册幻灯片完成时，它应该再次从第一张图像开始。而且当我尝试打开第二张专辑时，它大多数时候都不会显示幻灯片。我认为每张幻灯片和当前幻灯片的计数存在一些问题。

    <!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body>

<h2 style="text-align:center">Lightbox</h2>

<div class="row">
  <div class="column">
    <img src="https://www.gstatic.com/webp/gallery/1.jpg" style="width:100%" onclick="openModal_1()" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://www.gstatic.com/webp/gallery/4.jpg" style="width:100%" onclick="openModal_2()" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal_1" class="modal">
  <span class="close cursor" onclick="closeModal_1()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 3</div>
      <img src="https://www.gstatic.com/webp/gallery/1.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 3</div>
      <img src="https://www.gstatic.com/webp/gallery/2.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 3</div>
      <img src="https://www.gstatic.com/webp/gallery/3.jpg" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>
  </div>
</div>
<div id="myModal_2" class="modal">
  <span class="close cursor" onclick="closeModal_2()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 2</div>
      <img src="https://www.gstatic.com/webp/gallery/4.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 2</div>
      <img src="https://www.gstatic.com/webp/gallery/5.jpg" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>
  </div>
</div>
<script>
function openModal_1() {
  document.getElementById("myModal_1").style.display = "block";
}
function openModal_2() {
  document.getElementById("myModal_2").style.display = "block";
}

function closeModal_1() {
  document.getElementById("myModal_1").style.display = "none";
}
function closeModal_2() {
  document.getElementById("myModal_2").style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
}
</script>

</body>
</html>

code is running here

and here

最佳答案

这是您似乎想要使用 Bootstrap 4 完成的示例，虽然它没有包含在您的问题中，但被用作问题标签，所以我猜您正在使用它或者至少想要使用它:

使用标签:

/* added for SO example only, you probably don't need it */
.nav.nav-tabs {
  margin: 1rem 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="slider-1-tab" data-toggle="tab" href="#slider-1" role="tab" aria-controls="slider-1" aria-selected="true">Slider 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="slider-2-tab" data-toggle="tab" href="#slider-2" role="tab" aria-controls="slider-2" aria-selected="false">Slider 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="slider-1" role="tabpanel" aria-labelledby="slider-1-tab">
      <div id="carouselSlider-1" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselSlider-1" data-slide-to="0" class="active"></li>
          <li data-target="#carouselSlider-1" data-slide-to="1"></li>
          <li data-target="#carouselSlider-1" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/1.jpg" alt="First slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/2.jpg" alt="Second slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/3.jpg" alt="Third slide">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselSlider-1" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselSlider-1" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <div class="tab-pane" id="slider-2" role="tabpanel" aria-labelledby="slider-2-tab">
      <div id="carouselSlider-2" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselSlider-2" data-slide-to="0" class="active"></li>
          <li data-target="#carouselSlider-2" data-slide-to="1"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/4.jpg" alt="First slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/5.jpg" alt="Second slide">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselSlider-2" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselSlider-2" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>

<小时/>

诚然，它可以变得更加智能。您可以有一个包含图库结构的配置对象和一个从对象输出必要标记的函数。

带有选项卡和 config 对象的通用示例:

在编译时从config动态构建所有选项卡+ slider :

$(function() {
  const galleryConfig = {
    sliders: [{
      id: 'slider-1',
      title: 'Slider 1',
      slides: [{
        src: 'https://www.gstatic.com/webp/gallery/1.jpg',
        alt: 'First slide'
      }, {
        src: 'https://www.gstatic.com/webp/gallery/2.jpg',
        alt: 'Second slide'
      }, {
        src: 'https://www.gstatic.com/webp/gallery/3.jpg',
        alt: 'Third slide'
      }]
    }, {
      id: 'slider-2',
      title: 'Slider 2',
      slides: [{
        src: 'https://www.gstatic.com/webp/gallery/4.jpg',
        alt: 'First slide'
      }, {
        src: 'https://www.gstatic.com/webp/gallery/5.jpg',
        alt: 'Second slide'
      }]
    }]
  };

  function generateSliders(config) {
    let navs = $('<ul />', {
      role: 'tablist',
      class: 'nav nav-tabs'
    });
    let tabs = $('<div />', {
      class: 'tab-content'
    })
    config.sliders.forEach((slider, index) => {
      let $li = $('<li />', {
        class: 'nav-item',
        html: $('<a />', {
          class: 'nav-link' + (index ? '' : ' active'),
          id: `slider-${index + 1}-tab`,
          'data-toggle': 'tab',
          href: `#slider-${index + 1}`,
          role: 'tab',
          'aria-controls': `#slider-${index + 1}`,
          'aria-selected': index ? 'false' : 'true',
          text: slider.title
        })
      });
      $li.appendTo(navs);
    });
    navs.appendTo($('#galleryContainer'));

    config.sliders.forEach((slider, index) => {
      let $tab = $('<div />', {
        class: 'tab-pane' + (index ? '' : ' active'),
        id: slider.id,
        role: 'tabpanel',
        'aria-labelledby': `${slider.id}-tab`,
        html: $('<div />', {
          class: 'carousel slide',
          'data-ride': 'carousel',
          id: `carouselSlider-${index + 1}`,
          html: $('<ol />', {
            class: 'carousel-indicators',
            html: slider.slides.map((s, i) => $('<li />', {
              'data-target': `#carouselSlider-${index + 1}`,
              'data-slide-to': `${i}`,
              class: i ? '' : 'active'
            })[0].outerHTML).join('')
          })[0].outerHTML
          + $('<div />', {
            class: 'carousel-inner',
            html: slider.slides.map((s, i) => $('<div />', {
              class: 'carousel-item' + (i ? '' : ' active'),
              html: $('<img />', {
                class: 'd-block w-100',
                src: s.src,
                alt: s.alt
              })
            })[0].outerHTML).join('')
          })[0].outerHTML
          + $('<a />', {
            class: 'carousel-control-prev',
            href: `#carouselSlider-${index + 1}`,
            role: 'button',
            'data-slide': 'prev',
            html: $('<span />', {
              class: 'carousel-control-prev-icon',
              'aria-hidden': 'true'
            })[0].outerHTML
            + $('<span />', {
              class: 'sr-only',
              text: 'Previous'
            })[0].outerHTML
          })[0].outerHTML
          + $('<a />', {
            class: 'carousel-control-next',
            href: `#carouselSlider-${index + 1}`,
            role: 'button',
            'data-slide': 'next',
            html: $('<span />', {
              class: 'carousel-control-next-icon',
              'aria-hidden': 'true'
            })[0].outerHTML
            + $('<span />', {
              class: 'sr-only',
              text: 'Next'
            })[0].outerHTML
          })[0].outerHTML
        })
      });
      $tab.appendTo(tabs)
    })
    tabs.appendTo($('#galleryContainer'));
  }

  generateSliders(galleryConfig);
})

/* added for SO example only, you probably don't need it */
.nav.nav-tabs {
  margin: 1rem 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="galleryContainer"></div>
</div>

显然，您的配置对象可以从外部源加载。这只是一个概念证明。 generateSliders() 所做的是遍历配置对象中的每个 slider 并输出必要的 Bootstrap 4 标记，因此您不必这样做，特别是因为很容易错过 aria 属性，并且，恕我直言，应尽可能避免手动操作。

<小时/>

使用模态框:

.modal-launchers img {
  width: 100px;
  height: auto;
  display: inline-block;
  margin-right: 1rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col modal-launchers">
      <a id="modal-link-1" href="#modal-1" data-toggle="modal" data-target="#modal-1">
        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="First slider">
      </a>
      <a id="modal-link-2" href="#modal-2" data-toggle="modal" data-target="#modal-2">
        <img src="https://www.gstatic.com/webp/gallery/4.jpg" alt="Second slider"></a>
    </div>
  </div>
</div>
<div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="modal-link-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">First gallery</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="carouselSlider-1" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselSlider-1" data-slide-to="0" class="active"></li>
            <li data-target="#carouselSlider-1" data-slide-to="1"></li>
            <li data-target="#carouselSlider-1" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/1.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/2.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/3.jpg" alt="Third slide">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselSlider-1" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselSlider-1" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="modal-link-2" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Second gallery</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="carouselSlider-2" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselSlider-2" data-slide-to="0" class="active"></li>
            <li data-target="#carouselSlider-2" data-slide-to="1"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/4.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="https://www.gstatic.com/webp/gallery/5.jpg" alt="Second slide">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselSlider-2" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselSlider-2" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

再说一次，这只是一个例子。您需要做的就是查看 Bootstrap 的文档，从示例中获取标记并将其应用到您的代码中。

<小时/>

带有模式和 config 对象的通用示例:

在编译时从config动态构建所有模式+ slider :

$(function() {
  const galleryConfig = {
    sliders: [{
      id: 'slider-1',
      title: 'Slider 1',
      slides: [{
        src: 'https://picsum.photos/id/230/800/600',
        alt: 'First slide'
      }, {
        src: 'https://picsum.photos/id/231/800/600',
        alt: 'Second slide'
      }, {
        src: 'https://picsum.photos/id/232/800/600',
        alt: 'Third slide'
      }]
    }, {
      id: 'slider-2',
      title: 'Slider 2',
      slides: [{
        src: 'https://picsum.photos/id/233/800/600',
        alt: 'First slide'
      }, {
        src: 'https://picsum.photos/id/234/800/600',
        alt: 'Second slide'
      }, {
        src: 'https://picsum.photos/id/235/800/600',
        alt: 'Third slide'
      }, {
        src: 'https://picsum.photos/id/236/800/600',
        alt: 'Fourth slide'
      }, {
        src: 'https://picsum.photos/id/237/800/600',
        alt: 'Fifth slide'
      }]
    }]
  };

  function generateModals(config) {
    let navs = $('#galleryContainer');
    config.sliders.forEach((slider, i) => {
      let $launcher = $('<a />', {
        id: `modal-link-${i}`,
        href: `#gallery-modal-${i}`,
        'data-target': `#gallery-modal-${i}`,
        'data-toggle': 'modal',
        title: slider.title,
        html: slider.slides.map(image => $('<img />', {
          src: image.src,
          alt: image.title
        })).map(o => o[0].outerHTML).join('')
      });
      $launcher.appendTo(navs);
    });
    navs.appendTo($('#galleryContainer'));

    config.sliders.forEach((slider, i) => {
      let $modalDiv = $('<div />', {
        class: 'modal fade',
        id: `gallery-modal-${i}`,
        role: 'dialog',
        'aria-labelledby': `modal-link-${i}`,
        'aria-hidden': 'true',
        html: $('<div />', {
          class: 'modal-dialog modal-lg',
          role: 'document',
          html: $('<div />', {
            class: 'modal-content',
            html: $('<div />', {
                class: 'modal-header',
                html: $('<h5 />', {
                    class: 'modal-title',
                    text: slider.title
                  })[0].outerHTML +
                  $('<button />', {
                    type: 'button',
                    class: 'close',
                    'data-dismiss': 'modal',
                    'aria-label': 'Close',
                    html: $('<span />', {
                      'aria-hidden': 'true',
                      html: '&times;'
                    })
                  })[0].outerHTML
              })[0].outerHTML +
              $('<div />', {
                class: 'modal-body',
                html: $('<div />', {
                  class: 'carousel slide',
                  'data-ride': 'carousel',
                  id: `carouselSlider-${i}`,
                  html: $('<ol />', {
                      class: 'carousel-indicators',
                      html: slider.slides.map((o, k) => $('<li />', {
                        'data-target': `#carouselSlider-${i}`,
                        'data-slide-to': `${k}`,
                        class: k ? '' : 'active'
                      })[0].outerHTML).join('')
                    })[0].outerHTML +
                    $('<div />', {
                      class: 'carousel-inner',
                      html: slider.slides.map((o, k) => $('<div />', {
                        class: 'carousel-item' + (k ? '' : ' active'),
                        html: $('<img />', {
                          class: 'd-block w-100',
                          src: o.src,
                          alt: o.alt
                        })
                      })[0].outerHTML).join('')
                    })[0].outerHTML +
                    $('<a />', {
                      class: 'carousel-control-prev',
                      href: `#carouselSlider-${i}`,
                      role: 'button',
                      'data-slide': 'prev',
                      html: $('<span />', {
                          class: 'carousel-control-prev-icon',
                          'aria-hidden': 'true'
                        })[0].outerHTML +
                        $('<span />', {
                          class: 'sr-only',
                          text: 'Previous'
                        })[0].outerHTML
                    })[0].outerHTML +
                    $('<a />', {
                      class: 'carousel-control-next',
                      href: `#carouselSlider-${i}`,
                      role: 'button',
                      'data-slide': 'next',
                      html: $('<span />', {
                          class: 'carousel-control-next-icon',
                          'aria-hidden': 'true'
                        })[0].outerHTML +
                        $('<span />', {
                          class: 'sr-only',
                          text: 'Next'
                        })[0].outerHTML
                    })[0].outerHTML
                })
              })[0].outerHTML
          })
        })
      });
      $modalDiv.appendTo($('body'))
    })
  }

  generateModals(galleryConfig);
})

#galleryContainer img {
  height: 72px;
  width: auto;
  display: block;
  margin: 0 1px 1px 0;
}
#galleryContainer a {
  margin: 0 0 -1px;
  padding: .5rem;
  display: flex;
  flex-wrap: wrap; 
  align-items: center;
  justify-content: center;
  transition: background-color .3s ease-out;
  background-color:transparent;
}
#galleryContainer a:hover {
  background-color: #f5f5f5;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col">
      <div id="galleryContainer"></div>
    </div>
  </div>
</div>

关于javascript - Bootstrap LightBox Gallery 包含许多相册，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58780636/

文章推荐： javascript - 同一页面多个倒计时

文章推荐： javascript - 无法从 jQuery 将二进制数据保存到 AWS S3

文章推荐： javascript - MPEG-DASH 跨浏览器播放

文章推荐： c++ - 元组和可变参数模板的编译问题

bash - 如何从命令行将多张图片上传到 imgur 相册？
这就是我现在拥有的，它适用于单个图像。 curl -vH "Authorization: Client-ID 3e7a4deb7ac67da" -F image=@/path/to/image htt
java - 以编程方式创建 PDF 相册
我有一套 PDF 相册模板(它们在文本和照片应该放置的地方有空白方 block )。我的需求是使用这些模板来生成实际的相册。我的计划是使用 iText 和 Java。我会向应用程序发送一组要使用的所
php - 多文件上传，相册，mysql
我有一个包含多个字段的表单，用户需要通过附加图像数量的选项来感受: '; $num++; } ?> 提交后，它会在数据库中创建一个名为“album”的表，如下所示: fun
facebook - 上传视频到 Facebook 相册
我创建了一个 Facebook 相册并拥有相册 ID。我可以使用/photos API 将照片上传到相册。但我无法使用类似/videos API 的方式上传视频。我收到错误消息: “(#200)用户没
ios - 如何直接进入 "All Photos"相册？
我的代码是这样的: oldPicker = [[UIImagePickerController alloc] init]; if([UIImagePickerController isSourceTy
iphone - 图片来自 Facebook 相册
我正在实现一个 iPhone 应用程序，我必须从 Facebook 相册中检索图像并将这些照片显示为应用程序中的图库。我有这个链接 http://www.facebook.com/media/set/
php - 将图像上传到特定的 Facebook 相册
我可以通过将数据发布到使用 facebook graph api 创建相册 http://graph.facebook.com/ALBUM_ID/albums 它返回一个 id，这不是相册 id。
ios - 快速获取屏幕截图(相册)计数
我是 Swift 的新手，我正在尝试使用 fetchAssetCollections 创建一个简单地返回屏幕截图相册中照片数量的函数我有 func getNumScreenshots() -> In
php - 将图像上传到特定的 Facebook 相册
我在使用权限上传到特定 Facebook 相册时遇到问题。我被设置为特定 Facebook 页面的管理员，但是每当我尝试上传照片时，我似乎无法获得执行此操作的权限。我得到的错误是: Fatal e
database - 相册 table 设计
对于相册，我看到大多数人使用 3 个表: 专辑相片相册。但是，如果我查看像 facebook 这样的网站，这个模式将不起作用(如果我理解正确的话)，因为我的个人资料相册和一般相册中可能有一张照片，但
python - Google 相册 API - 新版本？
我正在编写一个程序来在本地备份我的 Google 相册库，上周代码运行良好，但在过去的几天里，我反复从 API 客户端收到错误消息，说“photoslibrary v1”不存在在 Google 的 A
ios - 如何在iOS 6/7中将图像保存到相机胶卷/相册？
似乎大多数方法都指向UIImageWriteToSavedPhotosAlbum()，但是在iOS 6及更高版本中，您需要用户权限才能写入相机胶卷，因此，如果他们说“no”，我希望能够调用代码。是否
使用 GridLayout 的 Java 相册
我想用Java制作简单的相册。要做到这一点，我认为这将是使用网格布局协调图片的最简单方法。我有图片的缓冲图像，我正在尝试使用以下代码将它们添加到网格布局中， BufferedImage a
ios - 如何在 iOS 中制作自定义文件夹/相册
我正在制作一个数据采集应用程序，它可以让医生拍摄皮肤病的照片以供以后用于人工智能/机器学习目的，所以我的应用程序将有一个拍照按钮来拍照，假设有 4 个标签或按钮命名疾病(水痘，湿疹等)一旦用户拍照，他
node.js - 上传照片到 Facebook 相册
我有一个 nodejs (+express + mongodb,gridstore) 后端，想上传一张照片到 facebook 相册。我遇到了两种方法。第一个 ( https://developer
google-photos - Google 相册 API 限制
我正在尝试使用 Google Photos API增量上传一个非常大的本地照片库。一切正常，但在上传大约 1.2GB 后，请求开始被拒绝并显示以下消息: Insufficient tokens fo
youtube - 从Google+相册-to- YouTube channel 导入视频
从youtube到google +很容易。但另一方面我有一个Google Plus个人资料和与其链接的YouTube channel 。但是-从youtube-我看不到我的google +相册中的视
iphone - 从 IOS 应用程序获取 facebook 相册
我正在尝试在 iPhone 应用程序中获取 facebook 用户的任何专辑。这是我正在使用的 fql 查询 NSString *query = [NSString stringWithFormat
Python Selenium 滚动到底部 Google Photos 相册
我正在尝试利用 Google Photos 幻灯片构建一个由 Raspberry Pi 驱动的数字相册。理想情况下，我希望能够通过 Selenium 自动化登录过程，然后使用 BeautifulSou
java - Google 相册 API - 静态内容上传项目的永久 URL
我正在尝试使用 Picasa Web Albums API 重构 Java 应用程序使用新的 Google 相册 API。在 Picasa API 中，您有 PhotoEntry 对象，它代表上传的

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Bootstrap LightBox Gallery 包含许多相册