使用 jquery.fancybox进行图片预览查看的代码举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FancyBox 图片预览</title>
<link rel="stylesheet" href="path/to/jquery.fancybox.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fancybox.min.js"></script>
</head>
<body>
<a data-fancybox="gallery" href="big_image_1.jpg"><img src="thumb_image_1.jpg" width="100" height="100"></a>
<a data-fancybox="gallery" href="big_image_2.jpg"><img src="thumb_image_2.jpg" width="100" height="100"></a>
<a data-fancybox="gallery" href="big_image_3.jpg"><img src="thumb_image_3.jpg" width="100" height="100"></a>
<script>
$(document).ready(function() {
$("[data-fancybox]").fancybox();
});
</script>
</body>
</html>在这个例子中，我们首先引入了必要的CSS和JavaScript文件。然后，我们创建了三个图片预览链接，每个链接包含一个缩略图和对应的大图。我们使用data-fancybox属性来指定预览组的名字。最后，在文档加载完成后，我们使用jQuery初始化了FancyBox。
评论已关闭