Bootstrap照相馆灯箱模态很暗

Question

我正在制作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 &raquo;</a>';
    html += '<a class="controls previous" href="' + (index) + '">&laquo; 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;
});

这些是我在网上找到的教程的基础上使用的。 我似乎无法弄清楚为什么灯箱无法正常工作。 注意：某些脚本不适用于该页面，但无论如何我还是将其保留在该页面上，我不知道这是否是一个问题。