「PC 端」文章内的图片,点击后全屏放大(含 FluidBox 插件调用方法)。
站点更新
2021年02月17日 15:03
1. 效果实现
实现了 PC 端点击图片放大效果。
具体效果,可以使用电脑访问此页面,并点击以下图片:
2. 开发说明
寻找了一圈,没有发现特别满意的插件,只有上古 jQuery 插件 FluidBox 令人比较满意。
使用的版本为:1.3.2
,但是此版本不兼容新版 jQuery。于是我将插件的 js 部分做了修改,让它能完美的兼容 jQuery 3.x
3. 调用方法
插件的调用非常简单,主要分为以下几个部分:
3.1. HTML 部分
例如有如下 HTML 代码,里面有多张图片。
<div class="content">
<h1>长乐未央 FluidBox Demo</h1>
<img src="https://images.clwy.cn/user/1/attachment/2021/0b56624c-3db7-4ae3-86a6-7d6496c157d7.jpg!large" alt="">
<img src="https://images.clwy.cn/user/1/attachment/2021/1f170c9a-7f9e-4348-a8d8-777e4be406c9.jpg!large" alt="">
</div>
3.2. 使用 JS 批量修改 HTML 的 img 标签部分
- 使用 js 找到指定需要调用插件的容器。
- 并给容器内所有图片外层包裹上超链接,添加对应的 class 和 data-action 属性。
const imgEls = $(".content img");
for (let el of Array.from(imgEls)) {
$(el).wrap(
`<a href='${$(el).attr(
"src"
)}' class='zoom-image' data-action='zoom'></a>`
);
}
3.3 启动 FluidBox 插件
找到对应的选择器后,直接调用就好了。
$("a.zoom-image").fluidbox({
// 缩放级别,默认 0.95
viewportFill: 0.8,
closeTrigger: [
{
selector: "window",
event: "scroll",
},
],
});
源码
插件源码和调用 demo,请下载后访问: