Woocommerce缩略图图像交换

我正在开发一个自定义的WordPress主题，我添加了在悬停时用缩略图交换主图像的功能

jQuery(document).ready(function($) {
 // Get the main WC image as a variable
 var wcih_main_imgage = $( 'a.woocommerce-main-image' ).attr( 'href' );
 // This is what will happen when you hover a product thumb
 $(".thumbnails a").hover(
 // Swap out the main image with the thumb
   function(){
     var photo_fullsize = $(this).attr('href');
     $('.woocommerce-main-image img').attr('src', photo_fullsize);
   },
   // Return the main image to the original
   function(){
     $('.woocommerce-main-image img').attr('src', wcih_main_imgage);
   }
 );
} );

这是有效的，但返回的图像比主图像大。现在我可以通过使用以下代码在网站的其他区域管理这个问题：

<script>
                jQuery(document).ready(function() { jQuery('.overlayimage').css('height','288px'); });
                    jQuery('.overlayimage').css('width','288px')
                    jQuery('.overlayimage').css({'overflow':'hidden', 'left':'0', 'top':'0', 'position':'absolute'});
                function resizeoverlay() {
                    var pr = jQuery('.overlayimage').eq(0).prev();
                    jQuery('.overlayimage').css('height',pr.height());
                    jQuery('.overlayimage').css('width',pr.width());
                    }
                jQuery(window).load(resizeoverlay);
                jQuery(window).resize(resizeoverlay);
            </script>

但我正在努力使这两个功能正常工作。有人能给我指正确的方向吗？