Fade-in images on gallery navigation

[emmemeno]

Hello and thank you for featherlight! I'm using the gallery extension and it works like a charm except the fade-in effect on gallery navigation. The gallery itself fades in and out correctly, but singles images only fade-out, not fade-in. Do I miss something?

[shamoon]

Yes, this was a bit of an annoying issue. It happens because when the next image is added to the DOM its opacity is 1 and so jQuery fadeTo doesnt work because its already 100% visible. The solution would be to add this one line to the source code at line 145 of featherlight.gallery.js:

$newContent.fadeTo(0, 0);

but until that gets added to the codebase, this will serve as a work-around:

$('a.gallery').featherlightGallery({
     afterContent: function(event) {
          // make sure new image is actually hidden before it fades in
          $(this.$content).fadeTo(0, 0);
     },
     afterOpen: function(event) {
          // this function is necessary to prevent first image from being hidden
          $(this.$content).fadeTo(this.galleryFadeIn, 1);
     },
});