lightGallery not loading images

Question

The page I am experiencing this issue on is this one.

I have tried swapping out static lightGallery JS for CDNJS version, I've tried calling the function in both JS and jQuery and I've even tried calling the lightGallery JS in both the header and footer but I'm still getting this issue.

I've tried searching but can't find any questions with a relevant and working answer for me.

I've had this plug in working in the past but it seems to have broken over the weekend. I thought it might have been a WordPress update that's broken it but I can't roll back to check!

Code example below:

$("#isotope-list").lightGallery();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/css/lightgallery.css" rel="stylesheet" />

<ul id="isotope-list" class="small-block-grid medium-block-grid large-block-grid">

  <li class="ghentenaar item lazy" data-original="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent46-e1421310997505.jpg" height="150px" width="150px">
    <div class="gallery-inner">
      <img class="th" src="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent46-150x150.jpg" />
    </div>
  </li>
  <li class="ghentenaar item lazy" data-original="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent12-e1421311015711.jpg" height="150px" width="150px">
    <div class="gallery-inner">
      <img class="th" src="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent12-150x150.jpg" />
    </div>
  </li>
  <li class="ghentenaar item lazy" data-original="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent11-e1421311034730.jpg" height="150px" width="150px">
    <div class="gallery-inner">
      <img class="th" src="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent11-150x150.jpg" />
    </div>
  </li>
</ul>

<ul id="isotope-list" class="small-block-grid medium-block-grid large-block-grid" style="position: relative; height: 0px;">


<li data-src="https://www.youtube.com/watch?v=AW63bqMYkF4">
    <img src="https://img.youtube.com/vi/AW63bqMYkF4/default.jpg">
</li>


<li data-src="https://www.youtube.com/watch?v=JBzTx_3L57w">
    <img src="https://img.youtube.com/vi/JBzTx_3L57w/default.jpg">
</li>


<li data-src="https://www.youtube.com/watch?v=F6LpkwQe_RA">
    <img src="https://img.youtube.com/vi/F6LpkwQe_RA/default.jpg">
</li>                           
</ul>

The error I get in console is TypeError: src is undefined.

Thanks in advance.

The full content of your question must be **in** your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a [mcve] **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable. More: [*How do I ask a good question?*](/help/how-to-ask) — T.J. Crowder, Apr 10 '17 at 09:39
The snippet doesn't demonstrate the problem ("verifiable"). With respect, it also fell down pretty badly on the "minimal" part -- we don't need 400 lines of items with pictures in them, just a few will do. I removed most of them (probably not enough). — T.J. Crowder, Apr 10 '17 at 09:55
@iMarkDesigns Not on that page, but there is a page with a video gallery - the videos are hosted on youtube (also not working) — E.Owen, Apr 10 '17 at 09:58
Do you follow the embed format that lightgallery required? that was what i can see on if that was your case... Update: check this mark `var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)/i);` Update 2: First i can see this error: `$(document).ready(function({$("li.lazy").lazyload();});` — iMarkDesigns, Apr 10 '17 at 09:59
@iMarkDesigns The video and images have been working fine for a while now. Over the weekend, I received an email form the site owner telling me they had stopped working. When I first installed the plugin, I copy/pasted the base code for the images and videos and then built up around that so it should be fine? I've updated the question with a copy of the HTML code form the Videos page. — E.Owen, Apr 10 '17 at 10:03
@E.Owen i see... im trying to dig down more about errors from Inspect Elements to see what exactly causing your issue. If you can debug your script codes again one by one, maybe you can see the issue there. — iMarkDesigns, Apr 10 '17 at 10:05
@E.Owen For the video, i thnk, you should use the embed one. Something like this: `https://www.youtube.com/embed/o7WYpYGhmzA` — iMarkDesigns, Apr 10 '17 at 10:07
@iMarkDesigns I've just updated those links on the live site - unfortunately didn't fix the issue... I'm no longer getting any errors in the console though... ignore that. I'm still getting the src error. — E.Owen, Apr 10 '17 at 10:17
one last thing, `$(document).ready(function({$("li.lazy").lazyload();});` if you do minimize this manually, you should remove the ";" after `lazyload()`. — iMarkDesigns, Apr 10 '17 at 10:17
@iMarkDesigns Thanks for your help so far. I've edited the lazy load call but that error still seems to be appearing. I'm still getting the lightGallery Type Error, too. Strange that it was working fine for some months and now it's all of a sudden stopped working. As far as I'm aware, nothing changed before I started editing the files today. — E.Owen, Apr 10 '17 at 10:28
Ok. i feel you. especially when im using photoswipe similar to lightgallery. I hope you can find solution to this. — iMarkDesigns, Apr 10 '17 at 10:29

TriForce · Answer 1 · 2017-04-10T13:23:21.950

0

Your code is fine, the only problem is you doesn't have the lightgallery video plugin.

you should call all of JS included in the lightgallery stuff to get every feature working:

<script src="js/lightgallery/lightgallery.js"></script>
<script src="js/lightgallery/lg-fullscreen.js"></script>
<script src="js/lightgallery/lg-thumbnail.js"></script>
<script src="js/lightgallery/lg-video.js"></script>
<script src="js/lightgallery/lg-autoplay.js"></script>
<script src="js/lightgallery/lg-zoom.js"></script>
<script src="js/lightgallery/lg-hash.js"></script>
<script src="js/lightgallery/lg-pager.js"></script>

This is an example with video plugin added: https://jsfiddle.net/4Lkuwcga/

edited Apr 10 '17 at 13:23

answered Apr 10 '17 at 12:47

TriForce

415
2
8

Do I need to include every file, even if I'm not using all of the features? I'm concerned about increasing page load speed if I don't necessarily _need_ to... – E.Owen Apr 10 '17 at 18:08
in your case, just call the video plugin, ive added in my jsfiddle example and it works with that feature – TriForce Apr 10 '17 at 18:18
I've found that this works for the videos but not the pictures. I'm currently loading every javascript file included with light gallery and the site is running extremely slowly! Any further suggestions would be appreciated. – E.Owen Apr 13 '17 at 13:03
are you calling the js files form external domains? like `src="https://cdnjs.cloudflare.......` ? if you are doing that, you should download the files and calling them from the same website `src="myfolder/js/.......` – TriForce Apr 13 '17 at 13:30
I've tried both but it's still not working! I haven't yet tried loading everything in using files local to the site though. I'll try that next and see where it gets me. – E.Owen Apr 14 '17 at 18:09
maybe theres another problem, i recommend you to check in the element inspector (network tab) to check which thing is causing the slow loading – TriForce Apr 17 '17 at 12:29

lightGallery not loading images

1 Answers1