htmlcssbootstrap-4fancybox-3

fancy box and grid display issues. Pictures overlapping


Can someone look at the image below and let me know what I seem to be doing wrong? On the first load, pictures show up like this but then if I refresh, then it resolves itself.

box and grid

If I comment out the script, then everything shows up ok. If I add the script back in then it produces the result in the picture on the first load everytime


Solution

  • The answer to this is that there are about 3 images (full size) that are not loading. The reason is the capital .JPG and Chrome. Fixing the file name extenstions to .jpg will correct the issue as the image will load and the fancybox can do it's calculations to get the right heights.