lightGallery works perfectly on jsfiddle, but not on my local test page

Question

Link to jQuery plugin github and documentation

It is the exact same code, the only difference being that I link to several sources/external files instead of just throwing them all into one big file like on jsfiddle. But I get no error in the browser console, everything is linked properly.

It image lightbox works, the video light almost works, I just get a black blank empty light when clicking on the video link. When clicked this gets added to the HTML, but the HTML is empty inside the iframe. But on jsfiddle it is not.

<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>

I've been over and over this, and I can't even come up with one reason why it happens, I've tested in Firefox, Chrome and even IE. And since it works on jsfiddle in Firefox, so it can't really be the browser.

Any help is really appreciated, I'm so in the woods. I'm hoping it is just something really simple that I can't see because I've stared at intensely for hours.

Thanks.

Link to jsfiddle: http://jsfiddle.net/vtkv4j2h/5/

Link to the local files: 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();
});

What happen on your PC ? Maybe a conflict with another external script. Try in a new project with only this code — jean-max, Sep 23 '16 at 08:56
I just see a blank black empty lightbox, when clicking on the video. And it is just a local test, 1 folder with only these6 files in them. Not linked or part of a project. — , Sep 23 '16 at 08:58
Nope, nothing. Just a few successful GET requests. No errors. Please if you like, download the files above and open them in your browser. I'm curious to see if it only on my computer this happens. — , Sep 23 '16 at 09:08
Are you sure using a web-server to access if your url shows something like this file:/// rather than http:// then its a problem — Vinay, Sep 23 '16 at 09:26
have you tried calling lightgallery on `$(window).load(function() {..` ? it could be that you're calling it before the content has loaded? jsfiddle might be preloading as it validates code before displaying results. — Sam0, Sep 23 '16 at 10:33

score 0 · Answer 1 · answered Sep 23 '16 at 13:30

Thank you all for help and suggestions.

@Novice was right.

Are you sure using a web-server to access if your url shows something like this file:/// rather than http:// then its a problem

Switching to a properly virtual box solved the issue.

lightGallery works perfectly on jsfiddle, but not on my local test page

1 Answers1