jquery 弹窗相册

基础概念

jQuery 弹窗相册是一种基于 jQuery 库实现的图片展示功能，通常用于网站或应用中展示图片集合。用户可以通过点击图片或按钮来打开一个弹窗，查看大图或图片集。这种相册功能可以增强用户体验，使图片展示更加直观和互动。

类型

简单弹窗：点击图片后，弹出一个简单的窗口显示大图。
全屏弹窗：点击图片后，弹出一个全屏窗口显示大图。
图片集弹窗：点击图片后，弹出一个窗口显示多张图片，用户可以左右滑动查看。
带缩略图的弹窗：在弹窗中显示当前图片的缩略图，方便用户快速切换图片。

应用场景

产品展示：在电商网站或应用中展示产品图片，用户可以点击查看大图。
图片分享：在社交媒体或个人博客中展示图片集，用户可以查看和分享图片。
新闻报道：在新闻网站中展示相关图片，用户可以查看详细图片。
旅游景点：在旅游网站中展示景点图片，用户可以查看景点的全景图。

示例代码

以下是一个简单的 jQuery 弹窗相册示例，使用 Lightbox 插件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 弹窗相册示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
</head>
<body>
    <div>
        <a href="image1.jpg" data-lightbox="gallery">
            <img src="image1-thumb.jpg" alt="Image 1">
        </a>
        <a href="image2.jpg" data-lightbox="gallery">
            <img src="image2-thumb.jpg" alt="Image 2">
        </a>
        <a href="image3.jpg" data-lightbox="gallery">
            <img src="image3-thumb.jpg" alt="Image 3">
        </a>
    </div>

    <script>
        $(document).ready(function() {
            // 初始化 Lightbox
            lightbox.option({
                'resizeDuration': 200,
                'wrapAround': true
            });
        });
    </script>
</body>
</html>