Magnific Popup 图片处理插件-优快云博客

本文链接：https://blog.youkuaiyun.com/suny2020/article/details/149512628

Magnific Popup 是一个非常流行的 jQuery 响应式灯箱插件，它轻量、快速，而且功能强大，非常适合用于展示图片、视频或任何 HTML 内容。

下面是使用 Magnific Popup 的基本步骤和常见场景：

1. 引入文件

首先，你需要将 Magnific Popup 的 CSS 和 JavaScript 文件引入到你的网页中。通常，这些文件会放在 HTML 的 <head> 部分（CSS）和 <body> 结束标签之前（JS）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magnific Popup 示例</title>
    <link rel="stylesheet" href="path/to/magnific-popup.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

    <script src="path/to/jquery.magnific-popup.min.js"></script>
    <script>
        // 在这里初始化 Magnific Popup
    </script>
</body>
</html>

请确保将 path/to/ 替换为你实际文件所在的路径。

2. 初始化 Magnific Popup

引入文件后，你需要用 jQuery 选择器来选中你想要启用 Magnific Popup 的元素，然后调用 .magnificPopup() 方法。

场景一：单张图片

如果你只想点击一张图片，然后在新弹窗中显示它，可以这样做：

HTML：

<a href="images/image-1.jpg" class="open-popup-link">打开图片 1</a>

JavaScript：

$(document).ready(function() {
    $('.open-popup-link').magnificPopup({
        type: 'image' // 指定内容类型为图片
    });
});

场景二：图片画廊（Gallery）

这是 Magnific Popup 最常用的功能之一。当你有一组图片需要像画廊一样滑动查看时，Magnific Popup 能很好地实现。

HTML：

将所有属于同一个画廊的图片链接放在一个父容器中，或者给它们添加相同的类名。

<div class="gallery">
    <a href="images/image-1.jpg" title="图片 1 描述">
        <img src="images/thumbs/image-1-thumb.jpg" alt="图片 1">
    </a>
    <a href="images/image-2.jpg" title="图片 2 描述">
        <img src="images/thumbs/image-2-thumb.jpg" alt="图片 2">
    </a>
    <a href="images/image-3.jpg" title="图片 3 描述">
        <img src="images/thumbs/image-3-thumb.jpg" alt="图片 3">
    </a>
</div>

JavaScript：

选中父容器，并配置 gallery 选项。

$(document).ready(function() {
    $('.gallery').magnificPopup({
        delegate: 'a', // 点击父容器中的 <a> 标签
        type: 'image',
        gallery: {
            enabled: true // 启用画廊模式
        }
    });
});