javascript - 将 Blueimp Gallery 与 HTML 和 Bootstrap 集成时遇到问题

Question

我正在尝试将 Blueimp 图片库集成到带有 Bootstrap 的网站中，但当单击缩略图时灯箱脚本不会启动。相反，链接的图像显示在一个新打开的页面中，就像它默认情况下应该做的那样。这是代码:

头部是 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">

body :

  <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>

而且灯箱无法启动。有任何想法吗？非常感谢!

Answer 1

所以代码是正确的，只是在加载我通过 Developper 面板中的错误控制台找到的一些其他 Javascript 脚本时出现了一些错误...所以我将它们整理出来，现在 blueimp 的工作就像一个魅力，它是也有反应 :D 无论如何谢谢!