在WooCommerce中用缩略图代替打开FancyBox的主图像

时间:2013-01-31 作者:Sam

我希望在单击或悬停时,单个产品页面上主图像下方的缩略图可以替换主图像,我更喜欢悬停。现在,缩略图刚刚在自己的fancybox中打开。这是大多数大型电子商务网站上的一个非常常见的功能,但奇怪的是,在woocommerce中,这不是一个选项。任何帮助都将不胜感激。

5 个回复
SO网友:Gastón Labarthe

我自己刚刚达到了效果。如果其他人发现此帖子,我会将其张贴在此处:

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;
    }); 
。替换(\'-100x132\')从图像的url中删除大小,以返回完整图像,而不是缩略图。将其替换为您自己的缩略图大小。

我的解决方案基于:

SO网友:kaiser

JavaScript解决方案

由于原始答案已经可以使用字符串替换,但必须针对每个用例进行更改,这里有一个使用快速正则表达式的解决方案.test() 包装在一个自调用函数中,该函数使用默认方法防止事件(如以下链接)发生。

此插件将删除第一次出现的任何2-4位数字,这些数字之间用x 然后是另一个2-4位数。一些示例

image-name-123x456.ext
image_name123x456.ext
imageName1230x45.ext
imageName12x4567.ext
这是实际的插件。您只需填写一位:实际的选择器。

To Do: 您唯一需要做的就是提供实际的选择器(而不是.class-of-the-thumbnail-image) 对于图像。最好是(a)填写某个类,然后在缩略图中添加一个过滤器,以便将该类添加到您想要定位的每个图像中。

<?php
defined( \'ABSPATH\' ) or exit;
/* Plugin Name: (#83993) Full image size */

add_action( \'wp_footer\', \'wpse83993FullImageSize\' );
function wpse83993FullImageSize()
{
    ?>
    <script type="text/javascript">
( 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 );
    </script>
    <?
}
您的插件可以连接的一个可能点是将其与上的过滤器相结合post_thumbnail_html. 此筛选器有一些参数:$html, $post_id, $post_thumbnail_id, $size, $attr 您可以使用它来更改HTML。

另一个,也许更好的是wp_get_attachment_image_attributes-内部过滤器wp_get_attachment_image(), 调用的get_the_post_thumbnail(), 其本身由the_post_thumbnail().

apply_filters( \'wp_get_attachment_image_attributes\', $attr, $attachment );
只需在上面的插件中添加以下内容:

add_filter( \'wp_get_attachment_image_attributes\', \'wpse83993AddDefaultThumbnailClass\', 20, 2 );
function wpse83993AddDefaultThumbnailClass( $atts, $attachment )
{
    $atts[\'class\'] .= "class-of-the-thumbnail-image";
    return $atts;
}
服务器端解决方案:PHP比任何其他方法都更容易使用以下过滤器,以防它符合您的用例。

apply_filters( \'post_thumbnail_size\', $size );
您可以添加,只需调用每个帖子缩略图的完整大小,就可以了。然后通过CSS缩小图像大小。

SO网友:turtledropbomb

Wordpress在Wordpress 4.4中实现响应图像后,由于添加了srcset 属性。

以下是我用来解决此问题的代码段:

$(document).on(\'click\', \'.thumbnails .zoom\', function() {
    var photo_fullsize = $(this).find(\'img\').attr(\'src\').replace(\'-180x180\',\'\');
    var photo_srcset = $(this).find(\'img\').attr(\'srcset\').replace(\'-180x180\',\'\');
    $(\'.woocommerce-main-image img\').attr(\'src\', photo_fullsize);
    $(\'.woocommerce-main-image img\').attr(\'srcset\', photo_srcset);
    return false;
});

SO网友:Sam

我找到了这个http://www.magictoolbox.com/magiczoomplus/ 它可以满足我的需要。我只是将缩放设置为内部,这样它就不会打开缩放窗口,并且它有缩略图悬停,可以替换主图像。也许这可以帮助有类似问题的人。

SO网友:Jeppe

我在使用公认答案中的示例时遇到了问题,所以重新编写了一点,以防任何人需要一个有效的示例,而不依赖于缩略图大小的替换,这也会禁用默认的prettypoto操作。

$(".thumbnails").find("a.zoom").unbind(\'click\');
$(\'.thumbnails .zoom\').on(\'click\', function(e){
    console.log( $(\'.thumbnails .zoom\') );
    var photo_fullsize =  $(this).attr(\'href\');
    $(\'.woocommerce-main-image img\').attr(\'src\', photo_fullsize);
    $(\'a.woocommerce-main-image\').attr(\'href\', photo_fullsize);
    return false;
}); 

结束