gpt4 book ai didi

wordpress - 将 Woocommerce Zoom 添加到自定义库

转载 作者:行者123 更新时间:2023-12-01 13:11:46 24 4
gpt4 key购买 nike

我创建了一个自定义产品库。一切正常,但问题是我不能再在我自己的自定义产品图像模板中使用缩放效果。我在这里的意思是,当鼠标悬停在图像上时,它会放大鼠标光标周围的区域,而不是弹出缩放。

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

图片 galler 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的任何自定义类/属性吗?

最佳答案

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

});

});

我做了 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>

关于wordpress - 将 Woocommerce Zoom 添加到自定义库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59526002/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com