FancyBox3, how to fix error in image width and height calculations?

Question

JavaScript

Hello, I'm building a website and I have a problem. The site has a gallery (at the bottom of the page), I connected the jquery FancyBox3 plugin. The gallery works, but the first image always opens very huge, when you slide to the next image, the dimensions fall into place.
What could be the problem? How to solve it?
In a loop:

<a class="fancybox" data-fancybox="gallery" href="<?php echo $gallery_item['url']; ?>" data-caption="<?php echo $gallery_item['caption']; ?>" >
     <img src="<?php echo $gallery_item['url']; ?>" alt="<?php echo $gallery_item['caption']; ?>">
</a>