将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的自定义类/属性吗？

Answer 1

jQuery扩展缩放:产品轮播示例

您可以简单地使用一个名为exzoom的库，用于carousal和产品库的缩放功能。

下面是该库用法的一个简单示例

$(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

  });

});

我做了demo here，你可以看到

​

$(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>

​