Question

我正在开发一个自定义的WordPress主题，我添加了使用以下JS在悬停see here上使用缩略图图像交换主图像的功能：

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>

...但我正在努力让两个功能正常工作。有人能指出我正确的方向吗？

Answer 1

你应该在jquery dom ready函数中执行所有操作

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

Woocommerce缩略图图像交换

1 个答案: