Search code examples
javascriptlazy-loadinglightbox

Lazy loading breaks lightbox

Using this lazy-loading code, my lightbox breaks: clicking on an image shows the lightbox but without image.

I can see that the lightbox img tag has no src value by checking the inspector. I guess the lightbox checks the src before the lazy-loading has assigned the attribute and the value to the image.

How can I fix this issue?

Solution

  • You may be able to use the data-fullsize parameter mentioned in the documentation - if this is set on each <img> tag, they should be loaded when the gallery is opened.

    An example of how this might look in the HTML (with the lazy-loading example from the link you provided):

    <img data-lazy="img/cow.jpeg" data-fullsize="img/cow.jpeg">