Hello again, when I try to add in the fadein animation the plugin breaks. Can you please help?
I’ve tried to edit your gallery-block-lightbox.php using this guide: https://feimosi.github.io/baguetteBox.js/
Thank you.
Hi @shemakeswebsites,
I don’t see an option to change the transition speed (between images?).
If you want animation: ‘fadeIn’ you have to change the following line https://github.com/goaround/gallery-block-lightbox/blob/af7a096f3b6134662edca2ba7cfe63d8ce68a38a/gallery-block-lightbox.php#L14 to
wp_add_inline_script( 'baguettebox', 'window.addEventListener("load", function() {baguetteBox.run(".wp-block-gallery,:not(.wp-block-gallery)>.wp-block-image,.wp-block-media-text,.gallery,.wp-block-coblocks-gallery-masonry,.wp-block-coblocks-gallery-stacked,.wp-block-coblocks-gallery-collage,.wp-block-coblocks-gallery-offset,.wp-block-coblocks-gallery-stacked",{captions:function(t){var e=t.parentElement.classList.contains("wp-block-image")?t.parentElement.querySelector("figcaption"):t.parentElement.parentElement.querySelector("figcaption,dd");return!!e&&e.innerHTML},filter:/.+\.(gif|jpe?g|png|webp|svg|avif|heif|heic|tif?f|)($|\?)/i, animation: 'fadeIn'});});' );
But you have to fork the plugin. Otherwise, each plugin update will reset your changes.
Thank you very much for your help, but when I try to use this code, I get a server error. Have you tested this? Thank you!
wp_add_inline_script( 'baguettebox', 'window.addEventListener("load", function() {baguetteBox.run(".wp-block-gallery,:not(.wp-block-gallery)>.wp-block-image,.wp-block-media-text,.gallery,.wp-block-coblocks-gallery-masonry,.wp-block-coblocks-gallery-stacked,.wp-block-coblocks-gallery-collage,.wp-block-coblocks-gallery-offset,.wp-block-coblocks-gallery-stacked",{captions:function(t){var e=t.parentElement.classList.contains("wp-block-image")?t.parentElement.querySelector("figcaption"):t.parentElement.parentElement.querySelector("figcaption,dd");return!!e&&e.innerHTML},filter:/.+\.(gif|jpe?g|png|webp|svg|avif|heif|heic|tif?f|)($|\?)/i, animation: "fadeIn"});});' );
this should work
