2

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

});

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

谢谢

4

6 回答 6

4

做$('.woocommerce-main-image img').attr('src', photo_fullsize);而不是$('.woocommerce-main-image img').attr('src',' + photo_fullsize + ');它的工作原理。见这里：http ://codepen.io/anon/pen/uatGg

于 2013-06-25T21:03:52.347 回答
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之前解释的缩略图。

于 2013-08-20T13:54:19.993 回答
1

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

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

于 2013-06-25T21:14:11.560 回答
1

正如我已经在 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 );
于 2013-11-04T03:46:23.703 回答
0

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

于 2014-01-07T21:03:31.917 回答
0

只需从 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>
于 2014-09-19T11:27:01.240 回答