为自定义图库添加WooCommerce缩放功能

Question

我创建了一个定制产品库。一切都运作得很好，但问题在于我无法在自己的定制产品图像模板中再使用缩放效果。 在这里我所说的缩放是指鼠标悬停在图像上时，它会放大鼠标光标周围的区域，而不是弹出缩放。

我知道Woocommerce的更新版本已经包含了此功能。 但是如何在我的自定义模板中使用它呢？

图像库HTML代码如下：

<div class="wpgs-for">
<a class="venobox" data-gall="wpgs-lightbox" title="title" href="www.dadada.com" ><img src="url"/></a>
<a class="venobox" data-gall="wpgs-lightbox" title="title" href="www.dadada.com" ><img src="url"/></a>
<a class="venobox" data-gall="wpgs-lightbox" title="title" href="www.dadada.com" ><img src="url"/></a>
.....
</div>

有没有自定义类/属性来初始化缩放JS？

- dev-jim

---

你曾经使用过一些插件吗？ - Krupal Panchal

不行。然而，在这个模板中，我正在使用其他的JS库来进行幻灯片操作。 - dev-jim

那么，您在图库中使用WooCommerce产品吗？ - Krupal Panchal

是的。实际上这是产品画廊，但它需要更多的功能，因此我为它创建了一个自定义模板。 - dev-jim

尝试使用这个插件。https://wordpress.org/plugins/wp-image-zoooom/ - Krupal Panchal

实际上我不想再使用另一个插件了。但如果没有选择，那么我会尝试查看源代码来弄清楚他们是如何做到的。 - dev-jim

Answer 1

jQuery exzoom: 产品轮播示例

您可以简单地使用一个名为 exzoom 的库来实现产品画廊的轮播和缩放功能，该库非常小巧轻便。

以下是该库的用法的简单示例。

$(function(){
  $("#exzoom").exzoom({
    // thumbnail nav options
    "navWidth": 60,
    "navHeight": 60,
    "navItemNum": 5,
    "navItemMargin": 7,
    "navBorder": 1,

    // autoplay
    "autoPlay": true,

    // autoplay interval in milliseconds
    "autoPlayTimeout": 2000

  });

});

我制作了一个演示，你可以在这里查看

$(document).ready(function() {
$('.container').imagesLoaded( function() {
  $("#exzoom").exzoom({
        autoPlay: false,
    });
  $("#exzoom").removeClass('hidden')
});

});

.container { margin: 10px auto; max-width: 650px; }
.hidden { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Product-Carousel-Magnifying-Effect-exzoom/jquery.exzoom.js"></script>
    <link href="https://www.jqueryscript.net/demo/Product-Carousel-Magnifying-Effect-exzoom/jquery.exzoom.css" rel="stylesheet" type="text/css"/>

<style>
    body { min-height: 100vh;background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%); }
    #exzoom {
        width: 400px;
    }
    .container { margin: 10px auto; max-width: 650px; }
    .hidden { display: none; }
</style>

<div class="container">
<div class="exzoom hidden" id="exzoom">
    <div class="exzoom_img_box">
        <ul class='exzoom_img_ul'>
            <li><img src="https://picsum.photos/270/270/?random"/></li>
            <li><img src="https://picsum.photos/320/320/?random"/></li>
            <li><img src="https://picsum.photos/600/600/?random"/></li>
            <li><img src="https://picsum.photos/500/500/?random"/></li>
            <li><img src="https://picsum.photos/700/700/?random"/></li>
            <li><img src="https://picsum.photos/310/310/?random"/></li>
            <li><img src="https://picsum.photos/410/410/?random"/></li>
            <li><img src="https://picsum.photos/400/400/?random"/></li>
        </ul>
    </div>
    <div class="exzoom_nav"></div>
    <p class="exzoom_btn">
        <a href="javascript:void(0);" class="exzoom_prev_btn"> < </a>
        <a href="javascript:void(0);" class="exzoom_next_btn"> > </a>
    </p>
</div>
</div>
</div>

- Firefog