我正在制作一个Bootstrap照片库，除非我点击缩略图，否则一切都很好。灯箱会出来，但它像缩略图一样黑，我无法点击“下一个”和“上一个”按钮，因为每次点击灯箱中的任何地方它都会消失并返回到照片库。
我搜索网络包括这个，但我找到的解决方案没有帮助。这是我的HTML：
<html lang="en-US">
<head><title>D' Clean Look</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<!--Load Bootstrap css-->
<linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!--load font awesome-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet' href='https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css'>
<link rel="stylesheet" href="c:\website\css\stylesgallery.css" >
<link rel="stylesheet" href="c:\website\css\scrolling-nav.css">
<link rel="stylesheet" href="c:\website\css\styles.css" text="text/css">
<!-- Latest compiled JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"> </script>
<script src="file:///c:/dclean/js/jquery-1.11.2.min.js"></script>
<script src="file:///c:/dclean/js/photo-gallery.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row intro-heading">
<h1>
Plate Holder
</h1>
<p>Click <strong><a style="color:red" href="c:\website\index.html#products">Here</a></strong> to go back to the main page.</p>
</div>
<ul class="row">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\honda-h.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\hyundai-h.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\mugen-h.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\nismo-h.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\nissan-h.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\spoon-h.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\spoon-h2.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\sport-h.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\sti-h.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\subaru-h.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\toms-h.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="c:\website\products\plateholder\trd-h.jpg">
</li>
</ul>
</div> <!-- /container -->
<script src="file:///c:/dclean/js/bootstrap.min.js"></script>
<script src="file:///c:/dclean/js/jquery.easing.min.js"></script>
<script src="file:///c:/dclean/js/scrolling-nav.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.0.3/wow.min.js"></script>
<script>new WOW().init();</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
stylegallery CSS：
.intro-heading {
text-align:center;
border-bottom:1px dashed #ccc;
padding:0 0 20px 0;
margin-bottom:40px;
margin-top: 60px;
}
.intro-heading h3 {
font-family:arial;
font-weight:bold;
font-size:30px;
}
ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
ul li {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}
.modal-body {
padding:5px !important;
}
.modal-content {
border-radius:0;
}
.modal-dialog img {
text-align:center;
margin:0 auto;
}
.controls{
width:50px;
display:block;
font-size:11px;
padding-top:8px;
font-weight:bold;
}
.next {
float:right;
text-align:right;
}
/*override modal for demo only*/
.modal-dialog {
max-width:500px;
padding-top: 90px;
}
@media screen and (min-width: 768px){
.modal-dialog {
width:500px;
padding-top: 90px;
}
}
@media screen and (max-width:1500px){
#ads {
display:none;
}
}
照片库JS：
$(document).ready(function(){
$('li img').on('click',function(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
//start of new code new code
var index = $(this).parent('li').index();
var html = '';
html += img;
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+2) + '">next »</a>';
html += '<a class="controls previous" href="' + (index) + '">« prev</a>';
html += '</div>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(html);
//new code
$('a.controls').trigger('click');
})
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
})
$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('ul.row li:nth-child('+ index +') img').attr('src');
$('.modal-body img').attr('src', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
}else{
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('ul.row li').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});
这些是我根据网上找到的教程使用的。我似乎无法弄清楚为什么灯箱不能正常工作。 注意：有些脚本不适用于页面，但我还是把它留在了那里，我不知道这是不是一个问题。