Behavior of thumbnails and lightbox in gallery block and gallery section

Gallery blocks and gallery sections behave visually inconsistently. Specifically, I see two visual inconsistencies, and I wonder if they could be improved with custom code.

1) Thumbnails

Thumbnails in gallery block (good):
Each thumbnail smoothly fades in, only after it is fully loaded. This is how it would be desirable for the gallery section as well.

Thumbnails in the gallery section (could be improved):
Each thumbnail is displayed during loading, which means you see the line-by-line image buildup while the thumbnails are loading, which is not visually appealing. One would expect a smooth fade in of each thumbnail after it is fully loaded (as is the case with the gallery block).
On a fast internet connection you almost don't see this, so it doesn't bother much, but it does on a slow one, where the visual impression is kind of bumpy.

2) Lightbox

Lightbox in the gallery section (good):
The lightbox fades in softly. So it would be desirable also with the gallery block.

Lightbox in the gallery block (needs improvement):
The lightbox pops up without animation. One would expect a smooth fade in.

Maybe custom code could help.

I tried to avoid the abrupt popping up of the lightbox in the gallery block with an animation, which is not ideal with a bright lightbox background:

@keyframes fade-in {
    from {opacity: 0.3;}
    to {opacity: 1;}
}

.sqs-gallery-design-stacked-slide img {
    animation: fade-in 300ms ease-in-out;
}

Does anyone have an idea to solve the two issues with custom code?

For the Gallery section's thumbnails. have you try to turn on site animation? Does the Fade in animation not work?

4 hours ago, Beyondspace said:

For the Gallery section's thumbnails. have you try to turn on site animation? Does the Fade in animation not work?

Yes, animation is turned on. But thumbnails (preview images) do not fade in smoothly after loading as it is the case with gallery blocks, they just load without animation.
As said, you can only see this with a slow internet connection.

I'm having a similar issue, but I prefer the animation on the gallery section instead of the gallery block (unless I'm getting them mixed up...). Please check here.

https://www.joyceseymore.com/work/india

password: polypodium44

I prefer the lightbox in the first gallery because it has the title on overlay. But I prefer the overall look of the bottom gallery with the animation row by row instead of each individual thumbnail loading on its own. Any thoughts of how to fix this? Thanks!

I'm not quite sure if you mean loading the thumbnails or opening the lightbox.

My problem with the gallery section in version 7.1 is/was that the thumbnails won't fade in as smoothly as they do in the gallery block used in blogs. With a very slow internet connection, you can watch the thumbnails loading almost line by line, which doesn't look good. It would be desirable that they fade in smoothly in the background AFTER loading is fully completed.

With your first gallery, I see the desirable effect - the thumbnails fade in smoothly after they are fully loaded. For me this looks very nice, regardless of how fast the Internet connection is.
With your second gallery, as described earlier, the loading is rather jerky because the images load in real time as the data is transferred. It actually doesn't load in the background and fade in smoothly afterwards.

I was able to solve this problem with the Gallery Section thumbnails in version 7.1 using custom CSS. 
Please see: 

Hmm on my computer at least the second gallery looks better to me, but that might be because I have a faster connection. I think I will simply have to decide which one to use and go through and redo all the galleries on the site to match. Sigh. 

15 hours ago, HadleyS said:

Hmm on my computer at least the second gallery looks better to me, but that might be because I have a faster connection. I think I will simply have to decide which one to use and go through and redo all the galleries on the site to match. Sigh. 

Oh, I'm sorry, I got your two galleries mixed up. I meant it the other way around: of course I absolutely agree with you that the thumbnails of the second gallery load better.

Here are the views of loading the thumbnails of both galleries in a simulation of 3G Internet speed. The thumbnails of the second gallery fade in smoothly only after the images are fully loaded - this is the desired effect.

For gallery sections, this additional CSS code inserted in the head of the page solved the problem for me.

<style>
figure.gallery-grid-item {opacity: 0;}
figure.gallery-grid-item[data-loaded="true"] {opacity:1; transition: opacity 1s ease;}
</style>