我正在使用Blueimp图库在网页上显示一个灯箱。
我可以在页面上显示一个灯箱OK但是我想在不同的图像类别之下添加多个灯箱（例如 - 假日，自然，黑白等）。
我可以将灯箱显示为单独的＆＃39;行＆＃39;网页上的元素。
问题是第二个（或后续）灯箱点击其中的图像时不能正确打开图像 - 它们只是在没有格式化的浏览器中打开图像而不是图库样式他们应该。
这是可行的代码：
</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>
我只想在此下添加另一个灯箱，但我可以添加另一个＆＃39;行＆＃39;元素，它会工作。我还尝试再次添加一个画廊部分，但它仍然无效。它显示在主页面上OK，但它无法正确打开图像。
希望这很清楚？
由于
答案 0 :(得分：4)
你可以做得更好，我也有这个问题。
＆＃34; jQuery插件设置
blueimp Gallery jQuery插件注册了一个全局点击处理程序，用于在Gallery灯箱中打开包含data-gallery属性的链接。
要使用它，请按照灯箱设置指南进行操作，但将缩小的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>
接下来，将属性数据库添加到图库链接：
<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处理程序不是必需的，可以删除。＆＃34;
之后只需向data-gallery添加不同的图库名称，例如：data-gallery-fruits，它应该有效：D
答案 1 :(得分：1)
好吧我明白了......
我需要做的一件事：
https://github.com/blueimp/Gallery#container-ids-and-link-grouping
您还需要为要显示的每个图库创建单独的脚本。因此，如果您将图像放在一个名为：
的div中 <div id="color">
<a href="images/image-1.jpg" title="" data-gallery="#blueimp-gallery">
<img src="images/thumbnails/image-1.jpg" alt="">
</a>Etc Etc Etc
您需要此库的特定脚本，然后是后续图库的不同脚本：
<script>
document.getElementById('color').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>
<script>
document.getElementById('polaroid').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>
无论如何我是如何让它工作的......
答案 2 :(得分：-1)
使用jQuery非常容易！
HTML：
<div class="gallery">
<div><a href="1.jpg"><img src="1.jpg"></a></div>
<div><a href="2.jpg"><img src="2.jpg"></a></div>
</div>
<div class="gallery">
<div><a href="3.jpg"><img src="3.jpg"></a></div>
<div><a href="4.jpg"><img src="4.jpg"></a></div>
</div>
JS：
$(document).on('click', '.gallery', 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);
});
希望，它有所帮助。