wordpress - 将 Woocommerce Zoom 添加到自定义库
问题描述
我创建了一个自定义产品库。一切正常,但问题是我不能再在我自己的自定义产品图像模板中使用缩放效果。我这里的缩放是指当鼠标悬停在图像上时,它会放大鼠标光标周围的区域,而不是弹出缩放。
我知道较新版本的 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的任何自定义类/属性吗?
解决方案
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>
推荐阅读
- reactjs - 将 mui-datatable 与 admin-on-rest 集成
- jquery - 加载 jQuery 点击事件,即使使用后退按钮(Squarespace)
- python - 如何将 %%time 值存储在 Jupyter 的变量中?
- sql-server - 在 SQL Server 中创建一个函数,该函数返回许多用于排序的值
- reactjs - React-table 动态下拉可重用自定义过滤器
- random - random.randint() 与 uuid4 的随机性
- spss - 关于 SPSS 建模器的问题(使流自动运行存在障碍)
- php - 使用带有 codeigniter 的控制器路由所有页面
- sql-server - 将数据从 COLUMNS 更改为 ROW MSSQL
- postgresql - 如何从 SpatialLite 合并到 PostGIS?