0

链接到 jQuery 插件 github 和文档

这是完全相同的代码，唯一的区别是我链接到多个源/外部文件，而不是像在 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();
});
4

1 回答 1

0

谢谢大家的帮助和建议。

@新手是对的。

如果您的 url 显示类似 file:/// 而不是 http:// 那么它是一个问题，您确定使用网络服务器进行访问吗

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

于 2016-09-23T13:30:48.537 回答