使用 fancyBox 为图片添加放大及相册功能

Eric 杂记 3年前 1,021 次浏览评论已关闭

fancyBox 是一个流行的媒体展示增强组件，可以方便为网站添加图片放大、相册浏览、视频弹出层播放等效果。优点有使用简单，支持高度自定义，兼顾触屏、响应式移动端特性，总之使用体验相当好。

fancyBox https://github.com/fancyapps/fancybox

下面示例 fancyBox 常见用法（为图片添加放大和灯箱功能）。

下载所需 js 和 css 文件引入到网页，或者使用 CDN 资源引入。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Test Page</title>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

	<!-- JS -->
	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="jquery.fancybox.min.js"></script>
</body>
</html>

fancyBox 依赖 jQuery 3+，但是也支持 jQery 1.9.1+，就是有的功能效果差些。

接着在 <img> 标签外包裹一个 <a> 超链接，里面附上图片 url，添加 data 属性绑定事件。

如果只是图片放大功能，只需添加 data-fancybox 属性就可以，不需带属性值。

如果带属性值，则表示这是一个相册。当有多个图片链接带了同样属性值，就视为一个相册，在图片放大时会显示上下浏览按钮。

如果要为图片添加备注文字，使用 data-caption="" 属性。

以下是示例 HTML 结构。

<a href="image_1.jpg" data-fancybox="lightbox" data-caption="图像描述 #1">
	<img src="thumbnail_1.jpg" alt="" />
</a>

<a href="image_2.jpg" data-fancybox="lightbox" data-caption="图像描述 #2">
	<img src="thumbnail_2.jpg" alt="" />
</a>

完成以上两步操作就可以使用了，效果如下演示。

实际使用过程中，不可能每个图片去手动设置属性。可以放在网站后台处理，例如在网站模板文件通过正则输出。或者前端使用 JS 脚本自动添加。

以下是一段演示代码，使用 jQery 在选定元素里自动添加 <a> 包裹标签。其中 url 地址和描述信息取自 <img> 属性。

$(document).ready(function() {
    $("img").each(function() {
        var currentImage = $(this);
        currentImage.wrap("<a href='" + currentImage.attr("src") + "' data-fancybox='lightbox' data-caption='" + currentImage.attr("alt") + "'></a>");
    });
});

最后建议大家看看 fancyBox 官方文档，里面介绍了详细功能选项，可以根据自己需求定制不同效果。

相关文章