Woocommerce缩略图交换

Question

I am working on a custom WordPress theme and I have added the function of swapping the main image with the thumbnail image on hover see here using the following JS:

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);
   }
 );
} );

This works but returns images that are bigger than the main image. Now I can manage this problem in other areas of the site by using this code:

<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>

... but I am struggling to get the two functions working correctly. Can anyone point me in the right direction?

Answer 1

you should do all your operations in jquery dom ready function like that

       <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>