fancybox image gallery not showing on live page

Question

On this page I have a photo gallery using fancybox. On my laptop I can see all the png photos locally but not on the lice website. In the head section I have the link to the fancybox css <link rel=stylesheet type=text/css href=jquery.fancybox.min.css and also at the bottom of the code before the tag I have

<script>$(document).ready(function(){$(".fancybox").fancybox()});</script></body></html>. 

this is the html for the fancybox image gallery

<div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="png" href="png/1.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial view of Rye" src="png/1.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/2.png"><div class="img-fixed"><img class="img-fluid  lazy" alt="aerial view of property 15" src="png/2.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/3.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial view 3" src="png/3.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/4.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial view of property 5" src="images/4.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/5.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial-property-6" src="images/5.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/6.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial-property-8" src="images/6.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/7.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial-property-11" src="images/7.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/8.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial tree" src="images/8.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V1.png"><div class="img-fixed"><img class="img-fluid lazy" alt="ocean-view-living-1" src="images/V1.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V2.png"><div class="img-fixed"><img class="img-fluid lazy" alt="ocean-view-living-2" src="images/V2.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V3.png"><div class="img-fixed"><img class="img-fluid lazy" alt="ocean-view-living-1" src="images/V3.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V4.png"><div class="img-fixed"><img class="img-fluid lazy" alt="ocean-view-living-1" src="images/V4.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V5.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial view of Rye" src="images/V5.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V6.png"><div class="img-fixed"><img class="img-fluid  lazy" alt="aerial view of property 15" src="images/V6.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V10.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial view 3" src="images/V10.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V11.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial view of property 5" src="images/V11.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V10.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial-property-6" src="images/V10.png" /></div></a></div>
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V13.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial tree" src="images/V13.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2">
<div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V31.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial-property-11" src="images/V31.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V32.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial tree" src="images/V32.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V33.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial view of Rye" src="images/V33.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V34.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial-property-6" src="images/V34.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V35.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial-property-11" src="images/V35.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V36.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial tree" src="images/V36.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V37.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial view of Rye" src="images/V37.png" /></div></a></div></div><div class="clearfix visible-sm"></div><div class="row mb-2"><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V38.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial-property-6" src="images/V38.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V39.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial-property-11" src="images/V39.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V40.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial tree" src="images/V40.png" /></div></a></div><div class="col-6 col-sm-3"><a class="thumbnail fancybox" data-fancybox="images" href="png/V41.png"><div class="img-fixed"><img class="img-fluid lazy" alt="aerial view of Rye" src="images/V41.png" /></div></a></div></div><div class="clearfix visible-sm"></div></div>

Here is the fancybox main page that I copied the css amd js lines from if you need it. Can amyone figure out why the pngs aren't loading on the live website after I uploaded it?

Answer 1

It is because all of your script tags has defer attribute (it means it waits until full page is being loaded before script is triggered) but FancyBox script and your last inline script doesn't contain it. It means your last script which contains $(".fancybox").fancybox() is being loaded before jQuery script which is needed to run FancyBox.

Pass defer attribute to all of your dependent scripts too or remove it from others.

<script defer src="https://kit.fontawesome.com/593a9d194e.js"></script>
<script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script defer src=jquery.fancybox.min.js></script>
<script defer>
    $(document).ready(function() {
        $(".fancybox").fancybox()
    });
</script>

Why does it work on your local laptop? Probably your local host is fast enough (or cached) to initialize those scripts just in time.