使用jQuery单击缩略图替换主图像
我正在为产品页面创建一个小型产品库。 它目前有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 + '); }); 很想看看我错过了什么/做错了什么。
谢谢
做$('.woocommerce-main-image img').attr('src', photo_fullsize); 而不是$('.woocommerce-main-image img').attr('src',' + photo_fullsize + '); 它的工作原理。 见这里： http ： //codepen.io/anon/pen/uatGg
它对我不起作用。
$（’。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中删除-100×132以返回完整图像，而不是像之前解释的blackhawk那样返回缩略图。
安德鲁提供了一个很好的起点，但更进一步，以便你的放大照片中的像素更少……
$('.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]，以满足您的需求，但为初学者测试此代码。
我已经在WPSE上回答了一些非常相似的内容……
我正在使用匹配的正则表达式
- 非强制性破折号
- 2-4位数
- 的x分离器
- 2-4位数
这是实际的function。 它首先使用Regex作为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 );
很好的讨论 – 与上面的Gaston解决方案一起工作，我成功地使用了hover事件。 但我注意到，当页面加载时，如果当前没有缓存较大的图像，则hover效果在此之前不会开始工作。 有没有一种方法可以在页面加载时排队更大版本的图像？
只需禁用woocomerce设置中的灯箱
>