FancyBox.js基于JQuery图集弹层插件用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FancyBox.js 使用示例</title>
<link rel="stylesheet" href="path/to/jquery.fancybox.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fancybox.pack.js"></script>
<script>
$(document).ready(function() {
$("a.fancybox").fancybox();
});
</script>
</head>
<body>
<a class="fancybox" rel="gallery1" href="image1.jpg"><img src="image1_thumb.jpg" alt="图片1"></a>
<a class="fancybox" rel="gallery1" href="image2.jpg"><img src="image2_thumb.jpg" alt="图片2"></a>
<!-- 更多的图片链接... -->
</body>
</html>这个HTML代码示例展示了如何在一个简单的网页中使用FancyBox.js插件。首先，在<head>标签中包含了FancyBox的CSS文件和所需的JavaScript文件，以及引用了jQuery库。在<body>中，我们为每个图片创建了一个链接，并为它们添加了fancybox类。当文档加载完成时，使用jQuery为每个带有fancybox类的链接绑定FancyBox。这样，当用户点击图片时，就会以弹层的形式显示高分辨率的图片。通过rel属性，FancyBox可以将图片链接放入相应的图集中。
评论已关闭