Question

我正在尝试将Blueimp图片库集成到一个带有bootstrap的网站中，而灯箱脚本在点击缩略图时并没有开始。相反，链接的图像显示在新打开的页面中，就像它默认情况下应该这样做。这是代码：

头部中的

是css：

HEAD：

  <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

所以代码是正确的，只是在加载我在Discoveryper面板中通过错误控制台找到的其他一些Javascript脚本时出现了一些错误...所以我将它们分类出来，现在blueimp的工作方式就像魅力一样＃39;也是如此响应：D无论如何，谢谢！

无法将Blueimp Gallery与HTML＆amp;引导

1 个答案: