javascript - 无法将Blueimp Gallery与HTML和Bootstrap集成

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

在头去的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>

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

最佳答案

因此代码是正确的，并且全部正确，只是加载通过Developper面板中的Error Console定位的其他Javascript脚本时出现了一些错误...所以我将它们整理出来，现在blueimp像一个超级按钮一样工作，而且响应迅速： D还是谢谢！

关于javascript - 无法将Blueimp Gallery与HTML和Bootstrap集成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27656782/