时间戳

首页 > 解决方案 > 在背景图像 Woocommerce 上使用 jQuery 缩放

jquery - 在背景图像 Woocommerce 上使用 jQuery 缩放

问题描述

该代码完全符合我的要求，我只想知道为什么它在 woocommerce“单一产品”页面上不起作用。

当我运行 jQuery 时，当我将鼠标悬停在 jQuery 上时，它被添加为一种样式，img但我发现它不起作用。

我想知道我是否需要在 Woocommerce 中做任何其他事情。我搜索但找不到任何结果。

$('.wp-post-image').mousemove(function(e) {
  var amountMovedX = (e.pageX * -1 / 2);
  var amountMovedY = (e.pageY * -1 / 2);
  $(this).css({
    'background-size': '200%',
    'background-position': amountMovedX + 'px ' + amountMovedY + 'px'
  });
});
.wp-post-image {
  background-image: url('https://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc');
  background-size: 100%;
  display: block;
  height: 200px;
  width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wp-post-image"></div>

标签： jquerywoocommerce

解决方案

我想知道我是否需要在 Woocommerce 中做其他事情

好吧，如果这是一个自定义脚本，那么您应该首先enqueue将 jquery 放到您的页面上。

以下代码进入functions.php您的主题文件。

add_action('wp_enqueue_scripts', 'your_them_adding_jquery');

function your_them_adding_jquery()
{
  wp_enqueue_script('jquery');
}

或者

您可以enqueue自定义脚本并将 jquery 作为其依赖项加载。例如，您可以将代码段保存到名为“your_custom_zoom.js”的文件中，并使用以下代码段将其加载到 woocommerce 中：

以下代码进入functions.php您的主题文件。

add_action('wp_enqueue_scripts', 'your_them_adding_custom_zoom');

function your_them_adding_custom_zoom()
{
  wp_enqueue_script('custom-zoom', get_theme_file_uri('/js/your_custom_zoom.js'), 'JQuery', 1.5, TRUE);
}

注意：自定义 javascript 文件的文件路径可能不同。在此示例中，我js在主题根文件夹中创建了一个名为的文件夹，并将我的 javascript 文件保存在其中。

还要注意，如果你想$在 wordpress 中使用 jquery，你需要像这样使用你的代码：

jQuery(document).ready($ => {

  $('.wp-post-image').mousemove(function (e) {
    var amountMovedX = (e.pageX * -1 / 2);
    var amountMovedY = (e.pageY * -1 / 2);
    $(this).css({
      'background-size': '200%',
      'background-position': amountMovedX + 'px ' + amountMovedY + 'px'
    });
  });

});

但是，woocommerce 提供了自己的gallery zoom功能。如果你想使用它，那么你需要将它添加到你的主题中。

以下代码进入functions.php您的主题文件。

add_action('after_setup_theme', 'your_theme_support_for_woo_zoom');

function your_theme_support_for_woo_zoom()
{
  add_theme_support('wc-product-gallery-zoom');
  add_theme_support('wc-product-gallery-lightbox');
  add_theme_support('wc-product-gallery-slider');
};

推荐阅读