将 Blueimp Gallery 与 HTML 和 Bootstrap 集成时遇到麻烦

我正在尝试使用引导程序将 Blueimp 图片库集成到网站中，但单击缩略图时灯箱脚本无法启动。相反，链接的图像显示在新打开的页面中，就像默认情况下应该显示的那样。这是代码：

在头部是CSS：

头：

  <link rel="stylesheet" type="text/css" href="js/blueimp_gallery/css/blueimp-   gallery.min.css">
  <link rel="stylesheet" type="text/css" href="/js/blueimp_gallery/css/blueimp-gallery-indicator.css">

身体：

  <div class="dgallery2 row">
    <div class="content">
      <div class="bg effect2">
        <div id="links">
          <a href="images/portfolio/1.jpg" title="Banana" data-gallery>
              <img src="images/portfolio/thumbnail.jpg" alt="Banana">
          </a>
          <a href="images/portfolio/2.jpg" title="Apple" data-gallery>
              <img src="images/portfolio/thumbnail.jpg" alt="Apple">
          </a>
          <a href="images/portfolio/3.jpg" title="Orange" data-gallery>
              <img src="images/portfolio/thumbnail.jpg" alt="Orange">
          </a>
          <a href="images/portfolio/3.jpg" title="Orange" data-gallery>
              <img src="images/portfolio/thumbnail.jpg" alt="Orange">
          </a>
          <a href="images/portfolio/3.jpg" title="Orange" data-gallery>
              <img src="images/portfolio/thumbnail.jpg" alt="Orange">
          </a>
          <a href="images/portfolio/3.jpg" title="Orange">
              <img src="images/portfolio/thumbnail.jpg" alt="Orange">
          </a>
          <a href="images/portfolio/3.jpg" title="Orange" data-gallery>
              <img src="images/portfolio/thumbnail.jpg" alt="Orange">
          </a>
          <a href="images/portfolio/3.jpg" title="Orange">
              <img src="images/portfolio/thumbnail.jpg" alt="Orange">
          </a>
          <a href="images/portfolio/3.jpg" title="Orange" data-gallery >
              <img src="images/portfolio/thumbnail.jpg" alt="Orange">
          </a>
      </div>
    <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>    
   </div>
  </div>
  </div>

然后是正文底部的脚本：

 <script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-helper.js"></script>
 <script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery.min.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery-fullscreen.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery-indicator.js"></script>
<script type="text/javascript" src="/js/blueimp_gallery/js/jquery.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>

而且灯箱就是无法启动。有什么想法吗？谢谢！