DeepSeek探索全新的WordPress-AI插件（支持定制功能）点击立即了解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancybox Test</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
</head>
<body class="bg-gray-100 p-8">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<a href="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" data-fancybox="gallery" data-caption="这是图片名称1" class="rounded-md p-4 bg-white shadow-md hover:shadow-xl transition-shadow">
<img src="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" class="w-full h-auto rounded-md" />
</a>
<a href="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" data-fancybox="gallery" data-caption="这是图片名称2" class="rounded-md p-4 bg-white shadow-md hover:shadow-xl transition-shadow">
<img src="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" class="w-full h-auto rounded-md" />
</a>
<a href="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" data-fancybox="gallery" data-caption="这是图片名称1" class="rounded-md p-4 bg-white shadow-md hover:shadow-xl transition-shadow">
<img src="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" class="w-full h-auto rounded-md" />
</a>
<a href="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" data-fancybox="gallery" data-caption="这是图片名称2" class="rounded-md p-4 bg-white shadow-md hover:shadow-xl transition-shadow">
<img src="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" class="w-full h-auto rounded-md" />
</a>
<a href="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" data-fancybox="gallery" data-caption="这是图片名称1" class="rounded-md p-4 bg-white shadow-md hover:shadow-xl transition-shadow">
<img src="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" class="w-full h-auto rounded-md" />
</a>
<a href="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" data-fancybox="gallery" data-caption="这是图片名称2" class="rounded-md p-4 bg-white shadow-md hover:shadow-xl transition-shadow">
<img src="https://e3f49eaa46b57.cdn.sohucs.com/2025/3/16/23/14/MTAwMTIyXzE3NDIxMzgwNTUzMjE=.jpeg" class="w-full h-auto rounded-md" />
</a>
<!-- 可以添加更多图片 -->
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const options = {
Thumbs: {
type: "classic",
},
Toolbar: {
display: {
left: ["infobar"],
middle: [
"zoomIn",
"zoomOut",
"toggle1to1",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
],
right: ["slideshow", "thumbs", "close"],
},
},
};
Fancybox.bind('[data-fancybox="gallery"]', options);
});
</script>
</body>
</html>