在背景图像 Woocommerce 上使用 jQuery 缩放答案

【问题标题】：Use jQuery zoom on background image Woocommerce在背景图像 Woocommerce 上使用 jQuery 缩放
【发布时间】：2021-12-03 17:56:06
【问题描述】：

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

当我运行 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>

【问题讨论】：

“它不起作用”的描述过于宽泛，任何人都无法帮助您。您能否提供一个显示问题的示例，并检查控制台是否有错误。
看起来没问题，也没有“控制台”错误，但我无法放大照片。如果我能找出问题所在，我希望能帮助你。
不幸的是，这不是我正在寻找的解决方案，我正在寻找的正是这个链接：magnifierWoocommerce 必须有一个设置，它阻止了它，我只是不能'找不到它

标签： jquery woocommerce

【解决方案1】：

我想知道我是否需要在 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 作为其依赖项。例如，您可以将您的 sn-p 保存到名为“your_custom_zoom.js”的文件中，然后使用以下 sn-p 将其加载到 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');
};

【讨论】：