0
我使用Blueimp庫在網頁上顯示燈箱。Blueimp gallery在一個頁面上實現多次
我可以在頁面上顯示一個燈箱，但是我想爲不同的圖像類別（例如 - 節假日，大自然，黑色&白等等）添加多個燈箱。
我可以得到燈箱顯示爲網頁上的獨立「行」元素確定。
問題是第二個（或後續）燈箱在點擊其中的圖像時不能正確打開圖像 - 他們只是在瀏覽器中打開圖像而不使用格式，而不是使用圖庫樣式，因爲它們應該。
這是正常工作的代碼：
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Back</span> to Main Page
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="index.html#about">About</a>
</li>
<li class="page-scroll">
<a href="index.html#download">Images</a>
</li>
<li class="page-scroll">
<a href="index.html#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section class="gallery">
<div class="gallery-body">
<div class="container">
<div class="row">
<h2>Image Gallery</h2>
<!-- The container for the list of example images -->
<div id="links">
<a href="images/image-1.jpg" title="">
<img src="images/thumbnails/image-1.jpg" alt="">
</a>
<a href="images/image-2.jpg" title="">
<img src="images/thumbnails/image-2.jpg" alt="">
</a>
<a href="images/image-3.jpg" title="">
<img src="images/thumbnails/image-3.jpg" alt="">
</a>
<a href="images/image-4.jpg" title="">
<img src="images/thumbnails/image-4.jpg" alt="">
</a>
<a href="images/image-5.jpg" title="">
<img src="images/thumbnails/image-5.jpg" alt="">
</a>
<a href="images/image-6.jpg" title="">
<img src="images/thumbnails/image-6.jpg" alt="">
</a>
<a href="images/image-7.jpg" title="">
<img src="images/thumbnails/image-7.jpg" alt="">
</a>
<a href="images/image-8.jpg" title="">
<img src="images/thumbnails/image-8.jpg" alt="">
</a>
<a href="images/image-9.jpg" title="">
<img src="images/thumbnails/image-9.jpg" alt="">
</a>
<a href="images/image-10.jpg" title="">
<img src="images/thumbnails/image-10.jpg" alt="">
</a>
<a href="images/image-11.jpg" title="">
<img src="images/thumbnails/image-11.jpg" alt="">
</a>
<a href="images/image-1.jpg" title="">
<img src="images/thumbnails/image-1.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</section>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<!-- Core JavaScript Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Google Maps API Key - You will need to use your own API key to use the map feature
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
-->
<!-- Custom Theme JavaScript -->
<script src="js/grayscale.js"></script>
<!-- Custom LIGHTBOX JavaScript -->
<script src="js/blueimp/blueimp-helper.js"></script>
<script src="js/blueimp/blueimp-gallery.js"></script>
<script src="js/blueimp/blueimp-gallery-fullscreen.js"></script>
<script src="js/blueimp/blueimp-gallery-indicator.js"></script>
<script src="js/blueimp/blueimp-gallery-video.js"></script>
<script src="js/blueimp/blueimp-gallery-vimeo.js"></script>
<script src="js/blueimp/blueimp-gallery-youtube.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
/*jslint evil: true */
/*global window, document*/
// Including jQuery via the protocol relative url above works for both http and https.
// Explicitly including jQuery via https allows running the Gallery demo as local file:
if (!window.jQuery) {
document.write(
'<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>'
);
}
</script>
<script src="js/jquery.blueimp-gallery.js"></script>
<script src="js/demo.js"></script>
<script src="js/blueimp-gallery.min.js"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
</body>
我只是想這下添加其他收藏和我，雖然我可以只添加另一個「行」元素，它會工作。我也嘗試再次添加一個畫廊部分，但它仍然無法正常工作。它顯示在主頁面上，但它不能正確打開圖像。
希望這是清楚了嗎？
感謝
Wojciech的回答是最好的。 – RichieHH 2017-09-01 18:42:25