lightGallery отлично работает на jsfiddle, но не на моей локальной тестовой странице

Ссылка на плагин jQuery github и документацию

Это точно такой же код, с той лишь разницей, что я ссылаюсь на несколько исходных / внешних файлов вместо того, чтобы просто выбросить их все в один большой файл, как в jsfiddle. Но я не получаю ошибки в консоли браузера, все связано правильно.

Это изображение лайтбокс работает, видео свет почти работает, я просто получаю черный пустой пустой свет при нажатии на ссылку видео. При нажатии это добавляется в HTML, но 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. И поскольку он работает на jsfiddle в Firefox, он не может быть браузером.

Любая помощь очень ценится, я так в лесу. Я надеюсь, что это просто что-то действительно простое, чего я не вижу, потому что я пристально смотрел на него часами.

Благодарю.

Ссылка на 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();
});
Источник

1 ответ

Спасибо всем за помощь и предложения.

@Novice был прав.

Вы уверены, что используете веб-сервер для доступа, если ваш URL показывает что-то вроде этого файла:/// вместо http://, тогда это проблема

Переключение на правильно виртуальную коробку решило проблему.

Источник
Другие вопросы по тегам