Question

Link to jQuery plugin github and documentation

它是完全相同的代码，唯一的区别是我链接到几个源/外部文件，而不是将它们全部放入一个大文件，如jsfiddle。但我在浏览器控制台中没有出现任何错误，所有内容都正确链接。

它的图像灯箱工作，视频灯几乎可以正常工作，点击视频链接时我只得到一个黑色的空白灯。单击时，会将其添加到HTML中，但iframe中的HTML为空。但是在jsfiddle上却没有。

<iframe class="lg-video-object lg-youtube " src="//www.youtube.com/embed/VXEkoXgb4bI?wmode=opaque&amp;autoplay=1&amp;enablejsapi=1" allowfullscreen="" height="315" frameborder="0" width="560">
    #document
    <html>
        <head></head>
        <body></body>
    </html>
</iframe>

我已经一遍又一遍，我甚至无法想出它发生的一个原因，我已经在Firefox，Chrome甚至IE中进行了测试。因为它适用于Firefox中的jsfiddle，所以它不能真正成为浏览器。

任何帮助都非常感谢，我就是在树林里。我希望这是一件非常简单的事情，我无法看到，因为我已经强烈地盯着看了好几个小时。

感谢。

链接到jsfiddle：http://jsfiddle.net/vtkv4j2h/5/

链接到本地文件：https://mega.nz/#F!4QhXhQaY!vaIMGXqYSzJf8s8qkVouqg

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Why doesn't this work, when it works on jsfiddle</title>
  <link rel="stylesheet" href="lightgallery.min.css" media="screen" title="lightgallery">
</head>
  <body>
    <div id="lightgallery">
      <a href="https://dummyimage.com/1200x700/000/fff.jpg">
        <img src="https://dummyimage.com/300x200/000/fff.jpg" />
      </a>
      <a href="https://dummyimage.com/1200x700/d40fd4/0011ff.jpg">
        <img src="https://dummyimage.com/300x200/d40fd4/0011ff.jpg.jpg" />
      </a>
      <a href="https://dummyimage.com/1200x700/44d613/0011ff.jpg">
        <img src="https://dummyimage.com/300x200/44d613/0011ff.jpg" />
      </a>
      <a href="https://dummyimage.com/1200x700/1ff068/0011ff.jpg">
        <img src="https://dummyimage.com/300x200/1ff068/0011ff.jpg" />
      </a>
      <a href="https://dummyimage.com/1200x700/5e6063/0011ff.jpg">
        <img src="https://dummyimage.com/300x200/5e6063/0011ff.jpg" />
      </a>
      <a href="https://www.youtube.com/watch?v=VXEkoXgb4bI" data-poster="https://dummyimage.com/1200x700/fc1241/313de6.jpg&text=click-to-play">
        <img src="https://dummyimage.com/300x200/fc1241/313de6.jpg&text=Video1"/>
      </a>
      <a href="https://www.youtube.com/watch?v=VkzVgiYUEIM" data-poster="https://dummyimage.com/1200x700/73f00c/313de6.jpg&text=click-to-play">
        <img src="https://dummyimage.com/300x200/73f00c/313de6.jpg&text=Video2"/>
      </a>
      <a href="https://www.youtube.com/watch?v=7BWWWQzTpNU" data-poster="https://dummyimage.com/1200x700/f7ff00/313de6.jpg&text=click-to-play">
        <img src="https://dummyimage.com/300x200/f7ff00/313de6.jpg&text=Video3"/>
      </a>
    </div>
    <script src="jquery.js" charset="utf-8"></script> <!-- jQuery v3.1.0 -->
    <script src="lightgallery.min.js" charset="utf-8"></script>
    <script src="lg-video.min.js" charset="utf-8"></script>
    <script src="js.js" charset="utf-8"></script>
  </body>
</html>

js.js

$(document).ready(function() {
    $("#lightgallery").lightGallery();
});

Answer 1

谢谢大家的帮助和建议。

@Novice是对的。

如果您的网址显示某些内容，您确定使用网络服务器进行访问吗？喜欢这个文件：///而不是http：//然后是一个问题

切换到正确的虚拟框解决了这个问题。

lightGallery在jsfiddle上运行得很好，但不在我的本地测试页面上

1 个答案: