Question

我正在为产品页面创建一个小型产品库。它目前有4个缩略图和一个主图像。当您单击其中一个缩略图图像时，我希望主图像被单击的缩略图替换。

我这里有一个codepen .. http://codepen.io/anon/pen/oIzqj

我觉得我很亲密，但显然还不够。

这是我的jQuery代码......

$('.thumbnails .zoom').click(function(e){
  e.preventDefault();

  var photo_fullsize =  $(this).find('img').attr('src');

  $('.woocommerce-main-image img').attr('src',' + photo_fullsize + ');

});

很想知道我错过了什么/做错了什么。

由于

Answer 1

$('.woocommerce-main-image img').attr('src', photo_fullsize);代替$('.woocommerce-main-image img').attr('src',' + photo_fullsize + ');并且它有效。见这里：http://codepen.io/anon/pen/uatGg

Answer 2

它对我不起作用。

$（'。thumbnails .zoom'）。click（function（e）{ e.preventDefault（）;

没有完成他的工作并且正在向我发送图片。我通过修改代码实现了效果：

jQuery(document).on('click','.thumbnails .zoom', function(){
        var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-100x132','');
        jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
        return false;
    });

.replace(-100x132)从图片的网址中删除 -100x132 以返回完整图片，而不是之前解释过的blackhawk缩略图。

Answer 3

安德鲁提供了一个很好的起点，但更进一步，以便你的放大照片中的像素更少......

$('.thumbnails .zoom').click(function(e){
  e.preventDefault();
  var photo_fullsize = $(this).find('img').attr('src').replace('150/200','500/500');
  $('.woocommerce-main-image img').attr('src',photo_fullsize);
});

...调整JavaScript replace（）方法值[500/500]，以满足您的需求，但为初学者测试此代码。

Answer 4

因为我已经在WPSE上回答了类似的事情......

我正在使用匹配

的正则表达式

非强制性破折号
2-4位数
的x分离器
2-4位数

这是实际的功能。它首先使用正则表达式test()来加快速度。然后在更改实际图像src属性之前替换字符串。

( function( $ ) {
    $( '.thumbnails .zoom' ).on( 'click', function( event ) {
        event.preventDefault();

        var $img = $( this ).find( 'img' ),
            $src = $img.attr( 'src' ),
            search = /^([-]?)([\d]{2,4})((\s*)(x)(\s*))([\d]{2,4})$/;

        // Regex .test() is fast, so we use it *before* we actually do something
        if ( search.test( $src ) {
            var $url = $src.replace( search, '' );
            $( '.class-of-the-thumbnail-image' ).attr( 'src', $url );
        }
    } );
} )( jQuery );

Answer 5

良好的讨论 - 与上面的Gaston解决方案合作我成功地使用了悬停事件。但我注意到，当页面加载时，如果当前没有缓存较大的图像，则悬停效果在此之前不会开始工作。有没有一种方法可以在页面加载时排队更大版本的图像？

Answer 6

只需禁用woocommerce设置中的灯箱

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    > <script>
    > 
    >  1. $('.thumbnails .zoom').click(function(e){
    >               e.preventDefault(); 
    >               var photo_fullsize =  $(this).find('img').attr('src');
    >                     var title =  $(this).find('img').attr('alt');    
    >               $('.woocommerce-main-image img').attr('src',photo_fullsize);
    >                $('.woocommerce-main-image ').attr('href',photo_fullsize);
    >         
    >                $('.woocommerce-main-image ').attr('title',title);
    >                $('.woocommerce-main-image img').attr('alt',title);
    >             });
    > 
    > </script>

使用jQuery单击缩略图替换主图像

6 个答案: