Additional Variation Images Gallery update images on color selection

I’m in desperate need of some help to extend the plugin of the title to suit my needs in a way that I’ll explain below:

So I have two variation filters (color and size) and I would like to make the plugin swap variation images once just the color filter changes (which makes sense anyway, since variation images usually show the same product in different colors, whereas size doesn’t usually differentiate a product’s appearance; a T-shirt in size M looks identical to the same T-shirt in size L)… I know that’s how WooCommerce works, and it’s been criticized in the past for this behavior but nothing has changed yet…

So I’ve come up with the piece of code below that for any selected color, it extracts a variation of that color and a random size (it’s not random actually; it’s the last size in the array of variations) and assigns it to a variable named variation. So all that’s needed is a way to call the function showVariationImage(variation) in frontend.js of the plugin to do the images swap… But the function, as well as all other functions in the file, are declared anonymously, so I can’t call them from within my hook (unless I’m missing something, as JS isn’t exactly my cup of tea)… Can someone please advise me on how to achieve what I need – if that’s even possible?

So this is my code:

add_action('woocommerce_after_single_product', 'swap_variation_images_after_color_selection');
function swap_variation_images_after_color_selection()
{
?>
<script type="text/javascript">
(function($) {
    $(window).load(function() {
        $("a.filter-item").click(function() {
            var attribute = $(this).attr('data-value');

            console.log("Attribute: ---> " + attribute);

            var variations = $('form.variations_form').data('product_variations');

            console.log("Variations: ---> " + Object.values(variations));

            var variation_id = '';
            var variation;

            for (var i = 0; i < variations.length; i++) {
                if (variations[i].attributes.attribute_pa_color == attribute) {
                    variation_id = variations[i].variation_id;
                    variation = variations[i];
                }
            }

            if (variation_id != '') {
                console.log("Images: ---> " + Object.values(variation.variation_gallery_images));
               
                // ALL OF THE LINES BELOW ARE MY ATTEMPTS TO CALL THE APPROPRIATE FUNCTION... ALL FAILED MISERABLY...
                $.fn['WooVariationGallery'].variation = variation;
                $.fn['WooVariationGallery'].images = variation.variation_gallery_images;
              
                $('.woo-variation-gallery-wrapper').WooVariationGallery['galleryInit'];
             //   $('.woo-variation-gallery-wrapper').WooVariationGallery['showVariationImage'];//(variation.variation_gallery_images);
                //$('.woo-variation-gallery-wrapper').trigger('woo_variation_gallery_variation_images', variation.variation_gallery_images);
                //$('.woo-variation-gallery-wrapper').trigger('before_woo_variation_gallery_init', variation.variation_gallery_images);
                //$('.woo-variation-gallery-wrapper').trigger('woo_variation_gallery_init', variation.variation_gallery_images);
                // UP TO HERE...
            }
        });
    })
})(jQuery);
</script>
<?php
}

And this is the content of file frontend.js of the plugin, that does all the images preloading/swapping, etc…

Hope someone can help me. TIA.