如何在wordpress中悬停时翻转产品图像？

Posted 2023-03-25

【中文标题】如何在wordpress中悬停时翻转产品图像？

【英文标题】：How to flip Product image on hover in wordpress?

【发布时间】：2016-02-22 14:28:44

【问题描述】：

我想在鼠标悬停的产品图片上更改或翻转产品图片。所以请建议任何 WordPress 插件或任何实现该效果的代码（也建议进行更改的文件路径）。

【参考方案1】：

只需添加自定义图像字段，将 2 个图像（例如精选和来自自定义字段）放入包装器并更改包装器 z-index 上的层 hover.... CSS：

.product-image--wrapper .img1 
    position: relative;
    z-index: 1;


.product-image--wrapper .img2 
    position: relative;
    z-index: 0;


.product-image--wrapper:hover .img2 
z-index: 2;

..或者只是安装：https://wordpress.org/plugins/woocommerce-product-image-flipper/ 并关注：http://www.themelocation.com/how-to-flip-product-image-on-hover-in-woocommerce/

编辑：

我们使用以下代码修复 WooCommerce 产品图像翻转器：

jQuery(document).ready(function($)
    jQuery( 'ul.products li.pif-has-gallery a:first-child' ).hover( function() 
        jQuery( this ).find( '.wp-post-image' ).removeClass( 'fadeInDown' ).addClass( 'animated fadeOutUp' );
        jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeOutUp' ).addClass( 'animated fadeInDown' );
    , function() 
        jQuery( this ).find( '.wp-post-image' ).removeClass( 'fadeOutUp' ).addClass( 'fadeInDown' );
        jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeInDown' ).addClass( 'fadeOutUp' );
    );
);

【讨论】：

..你在 woocommerce 工作吗？ （你写的是“插件”，所以我认为你使用 WP）:)

您可以使用自定义字段进行自定义并编辑 woocommerce 或安装：wordpress.org/plugins/woocommerce-product-image-flipper

我更喜欢自定义选项..您需要自定义 woocommerce..制作两个自定义字段并包含在您的查询中，使用答案中的 css。

我应该在哪里添加这两个海关字段。

让我们continue this discussion in chat。

【参考方案2】：

我正在使用带有 woo-commerce 2.6.1 的 WordPress 4.5.3，它运行良好，尽管 WordPress 说插件不兼容，所以我自己承担风险。

尝试在你的函数中添加animate.css by daneden，我不知道这是否相关，但是如果我在function.php 上评论了animate.css，则插件无法正常工作。

哦，再一次，我认为你最好更改fadeInDown/fadeOutUp，我尝试只使用fadeIn/fadeOut，使用Down和Up会很奇怪，IMOO。

【参考方案3】：

由于产品图像翻转器已经过时了，这个工具在我的 woocommerce 商店中运行良好：WC Secondary Product Thumbnail https://de.wordpress.org/plugins/wc-secondary-product-thumbnail/

（希望它有所帮助，因为我花了很长时间才找到一个工作插件。Magni 图像翻转器也很奇怪，因为它会无休止地翻转图像，这真的不是我所期望的）

【参考方案4】：

@Matej Đaković 的扩展答案=>

首先安装https://wordpress.org/plugins/woocommerce-product-image-flipper/插件，然后将代码放在你的footer.php中

---

jQuery(document).ready(function($)
    jQuery( '.product-image' ).hover( function() 
        jQuery( this ).find( '.attachment-woocommerce_thumbnail' ).removeClass( 'fadeIn' ).addClass( 'animated fadeOut' );
        jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeOut' ).addClass( 'animated fadeIn' );
    , function() 
        jQuery( this ).find( '.attachment-woocommerce_thumbnail' ).removeClass( 'fadeOut' ).addClass( 'fadeIn' );
        jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeIn' ).addClass( 'fadeOut' );
    );
    );

【讨论】：

谢谢，我是新手，不知道如何正确构建代码部分。