javascript - Woocommerce 3.x 图像交换 "On Hover"大拇指

标签 javascript woocommerce flexslider

有点挣扎,我想请我的堆栈伙伴帮忙。

单个产品页面: 有谁知道将缩略图上的“单击时”事件更改为“悬停时+单击时(出于响应目的)”的技巧?

我知道这是一个反复出现的问题,但它似乎自 WooCommerce 的 de 3.0 以来已被弃用。

看来我必须更改 FlexSlider js 中的功能,但我找不到这个位置。

如果有帮助,我正在使用“工作室主题”。

也可以在那里找到我的网站:https://unisashoes.com.au/product/wikera-ks/

干杯

最佳答案

我终于弄清楚了,只需在悬停时触发 li 上的 click 事件即可。

我还添加了一个 jQuery(document).ready(function($) { 因为使用 jQuery.noConflict(); 如果不是,则 $ 未定义。

jQuery(document).ready(function($) {
    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails",
        start: function (){
        }
      });

      $(".flex-control-thumbs li img").hover(function(){
        $(this).click();
      });
    });
});

关于javascript - Woocommerce 3.x 图像交换 "On Hover"大拇指,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43465232/

相关文章:

php - Flexslider smoothHeight 不起作用

javascript - Meteor mongo插入独特的文档

javascript - ThreeJS,获取指向点击方向的向量

php - Woocommerce 多个结账页面

wordpress - W3TC 的 Woocommerce 商店页面中的产品列表随机消失

jquery - FlexSlider 循环问题

javascript - 查询 |如何将var添加到ajax url?

javascript - 为多个相似元素触发脚本

php - 从 WooCommerce 中的产品属性中删除 <p> 标签

javascript - FlexSlider touch 在 iPhone 上无法工作,但在 Android 上工作正常