1

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

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
brett m
  • 91
  • 1
  • 10
  • Is this live? Can you share a link? It would be easier to see what is going on by inspecting the code. My hunch is either a CSS issue or the script is executing before the DOM if fully loaded causing some measurement problems vertically on those boxes which cause them to layout in an overlap. – mrwpress Nov 27 '19 at 01:27
  • It sure is. Here is the live link http://poppinsscenic.com/costume-pictures.html . Tried moving the scripts to the top of the page instead of the bottom to test if the page was loading before the script but seemed to make no difference. Thanks for looking – brett m Nov 27 '19 at 01:46
  • 1
    I believe this is because you have missing full size images. I don't see any issues in the console relating to this. When I click that link and then click an image to load up the slideshow, you will see there are actually missing images in there. These missing images correspond to the location where the overlap is occurring. Thumbs are all there, but some of the full sizes are not. – mrwpress Nov 27 '19 at 04:13
  • Hmmm, I am not seeing that. I have full size and identical thumb sfor all? The console confirms this. All 9000px and larger – brett m Nov 27 '19 at 04:37
  • https://snipboard.io/I3Zwaq.jpg And, what happens when you click this image? http://poppinsscenic.com/img/gallery/costumes/11.jpg – mrwpress Nov 27 '19 at 04:41
  • https://snipboard.io/4PB2vu.jpg – mrwpress Nov 27 '19 at 04:43
  • So odd. My page is looking different. Where are you finding the right side gallery? Here is what I see... https://snipboard.io/H4gj2p.jpg Also, doesnt seem to be an issue in Edge, only Chrome with the double stacked images – brett m Nov 27 '19 at 18:34
  • Just click one of the images. It will bring up the show. But that is neither here nor there. The real question is why are those 3 images (you said were there) are not loading and 404 (they are missing). – mrwpress Nov 27 '19 at 18:58
  • Just noticed that the .JPG was capitalized for some reason. Edge is ok with that, seems Chrome isnt. It seems that was the discrepancy. It also seems to be a feature - or bug depending on how you look at it - that when Fancybox doesnt have the large image, it simply starts stacking images on the first load only. It didnt occur in Edge or Dreamweaver since they were able to overlook the capital .JPG extension and serve the file anyway. I appreciate your assistance on that one very much. – brett m Nov 27 '19 at 21:25
  • Your welcome. I have answered below and if you could accept it I would be super happy :) – mrwpress Nov 27 '19 at 23:22

1 Answers1

1

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.

mrwpress
  • 311
  • 1
  • 8