我正在使用 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>
我只想在此下方添加另一个灯箱，虽然我可以添加另一个“行”元素并且它会起作用。我也尝试再次添加画廊部分，但它仍然不起作用。它在主页上显示正常，但无法正确打开图像。
希望这是清楚的？
谢谢
最佳答案
你可以做得更好，我也遇到了这个问题。
"jQuery 插件设置
blueimp Gallery jQuery 插件注册了一个全局点击处理程序，以在 Gallery lightbox 中打开带有 data-gallery 属性的链接。
要使用它，请遵循 lightbox 设置指南，但将缩小的 Gallery 脚本替换为 jQuery 插件版本，并在包含 jQuery 后包含它:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>
接下来，将属性 data-gallery 添加到您的图库链接中:
<div id="links">
<a href="images/banana.jpg" title="Banana" data-gallery>
<img src="images/thumbnails/banana.jpg" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple" data-gallery>
<img src="images/thumbnails/apple.jpg" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange" data-gallery>
<img src="images/thumbnails/orange.jpg" alt="Orange">
</a>
</div>
灯箱设置指南中的 onclick 处理程序不是必需的，可以将其删除。”
之后只需将不同名称的画廊添加到data-gallery，例如:data-gallery-fruits，它应该可以工作:D
关于css - Blueimp gallery 在一页上实现多次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28379264/