堆栈内存溢出
  简体   繁体   English

带有许多专辑的 Bootstrap 灯箱库

[英]Bootstrap LightBox Gallery with many albums

 原文  2019-11-09 15:22:03  2   1    javascript/ html/ twitter-bootstrap/ bootstrap-4

问题描述

I want to use this code in my gallery webpage and the problem is when one album slides are finished it should start from the first image again.我想在我的画廊网页中使用此代码，问题是当一张专辑幻灯片完成后，它应该再次从第一张图片开始。 And also When I try to open the second album, it does not show the slides most of the time.而且当我尝试打开第二张专辑时，它大部分时间都不会显示幻灯片。 I think there is some problem with the counting of each slide and current slide.我认为每张幻灯片和当前幻灯片的计数存在一些问题。

    <!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和这里

1 个解决方案

解决方案1
 0  2019-11-09 20:56:58

Here's an example of what you seem to want to accomplish, using Bootstrap 4, which, although not included in your question, was used as a question tag, so I'm guessing you're using it or at least want to use it:这是您似乎想要使用 Bootstrap 4 完成的示例，虽然未包含在您的问题中，但它被用作问题标签，所以我猜您正在使用它或至少想使用它：

With tabs:使用标签： 

 /* 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>

Admittedly, it could be made smarter.诚然，它可以变得更智能。 You could have a config object containing the structure of your gallery and a function which outputs the necessary markup from your object.你可以有一个配置 object 包含你的画廊的结构和一个 function 从你的 object 输出必要的标记。

Generic example with tabs and config object:带有选项卡和config object 的通用示例：

Builds all tabs + sliders dynamically, at compile time, from config :在编译时，从config动态构建所有选项卡 + 滑块： 

 $(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>

Obviously, your config object could be loaded from an external source.显然，您的配置 object 可以从外部源加载。 This is just a proof of concept.这只是一个概念证明。 What generateSliders() does is goes through each of the sliders in the config object and outputs the necessary Bootstrap 4 markup, so you don't have to, especially since it's easy to miss an aria attribute and, IMHO, doing it by hand should be avoided, where possible. generateSliders()所做的是遍历配置 object 中的每个滑块并输出必要的 Bootstrap 4 标记，因此您不必这样做，特别是因为很容易错过 aria 属性，而且恕我直言，手工操作应该尽可能避免。

With modals:使用模态： 

 .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>

Again, just an example.同样，只是一个例子。 All you need to do is go on Bootstrap's docs, take the markup from an example and apply it to your code.您需要做的就是在 Bootstrap 的文档中找到 go，从示例中获取标记并将其应用到您的代码中。

Generic example with modals and config object:带有模态和config object 的通用示例：

Builds all modals + sliders dynamically, at compile time, from config :在编译时，从config动态构建所有模式 + 滑块： 

 $(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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Bootstrap的灯箱视频库不起作用 - Lightbox video Gallery for Bootstrap not working 灯箱+引导程序库，缩略图 - Lightbox+bootstrap gallery, thumbnails 在 Bootstrap-Lightbox 库中控制图像高度 - Controlling image height in Bootstrap-Lightbox gallery 如何将关闭按钮X设置为Bootstrap画廊灯箱？ - How to set close button X to Bootstrap gallery lightbox? Blueimp Bootstrap-Image-Gallery直接在页面加载时初始化为灯箱/以编程方式打开灯箱 - Blueimp Bootstrap-Image-Gallery initialize directly to lightbox / open lightbox programmatically on page load 带有不同专辑的jQuery轮播或图库 - JQuery carousel or gallery with different albums CSS JavaScript灯箱图库 - CSS JavaScript LightBox Gallery 将图库添加到灯箱1 - Adding a gallery to lightbox1 OpenLayers 弹出窗口中的灯箱画廊 - Lightbox Gallery in OpenLayers PopUp 灯箱上带有滑块的图片库 - Image gallery with slider on a lightbox
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM