用 jQuery 点击时用缩略图替换主图像

Posted 2023-02-25

【中文标题】用 jQuery 点击时用缩略图替换主图像

【英文标题】：Replace main image with thumbnail on click with jQuery

【发布时间】：2013-06-25 21:01:48

【问题描述】：

我正在为产品页面创建一个小型产品库。它目前有 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 + ');

);

很想看看我错过了什么/做错了什么。

谢谢

【参考方案1】：

使用$('.woocommerce-main-image img').attr('src', photo_fullsize); 而不是$('.woocommerce-main-image img').attr('src',' + photo_fullsize + '); 就可以了。见这里：http://codepen.io/anon/pen/uatGg

【讨论】：

当然，我知道是语法问题，谢谢

【参考方案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) 从图片的 url 中删除 -100x132 以返回完整的图片，而不是像 blackhawk 之前解释的缩略图。

【参考方案3】：

Andrew 提供了一个很好的起点，但要更进一步，这样您的放大照片中的像素混乱就会更少......

$('.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]，以满足您的需要，但请测试此代码以供初学者使用。

【讨论】：

我很困惑为什么代码在图像大小之间使用斜线而不是 x？换句话说，为什么它是“150/200”和“500/500”。这不应该是和 x 而不是斜杠，因为字符串是：image-file-name-150x200.jpg ？

【参考方案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 );

【讨论】：

非常好的答案。刚刚注意到您在 IF 语句中缺少一个右括号。还必须将搜索 REGEX 更改为此，但只是因为我在其他地方找到了它，我的 REGEX 不好。 :) search = /(-?)(\d2,4)(x)(\d2,4)/

要添加的另一件事，也许不是最佳实践，但如果您想确保在切换图像时保持裁剪大小，您可以将 var $url = $src.replace( search, '' ); 更改为：var $url = $src.replace('135x109','570x464'); ...当然还有自己的缩略图和产品图片裁剪尺寸。

【参考方案5】：

很好的讨论 - 使用上面的 Gaston 解决方案，我已经成功地使用悬停事件。但是我注意到，当页面加载时，如果当前没有缓存较大的图像，则悬停效果直到那时才开始起作用。有没有一种方法可以在页面加载时对较大版本的图像进行排队？

【参考方案6】：

只需从 woocomerce 设置中禁用灯箱

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