数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 Magnific Popup jQuery 插件？
Magnific popup 是一个 jQuery 插件，顾名思义，它可以用于在网页上显示一些 HTML 弹出窗口。它是一个轻量级、响应式、快速且模态对话框的 jQuery 插件。它可以用于显示任何类型的內容，例如图像、视频、ajax 响应、iframe 和图像库。
在下面的详细介绍中，讨论了在当前项目中使用此插件的多种方法。
从 https://plugins.jquery.com/magnific-popup/ 下载最新版本（zip 文件格式）。
您还可以使用以下命令在 Git Bash 中克隆 magnific 插件的 git 存储库：https://github.com/dimsemenov/Magnific-Popup.git。
git clone https://github.com/dimsemenov/Magnific-Popup.git
要使用此插件，您还需要将 jQuery CDN 包含到您的主要 HTML 文件中。因为最终它是一个 jQuery 插件，需要 jQuery 进行内部处理。
您需要将 magnific CSS 以及 magnific 脚本文件包含到您的工作区中，才能有效地使用 magnific 插件。
使用此插件最简单且有效的方法是将 jQuery 和 CSS 文件的 CDN 添加到您的 HTML 文件中，并使用它们来使用 magnific 插件。
CSS 文件 CDN
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
jQuery 文件 CDN
<script src = "https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"> </script>
在本文中，我们将使用 CDN 方法，通过将文件的 CDN 包含到我们的工作区中，并尝试使用 magnific 插件构建一些内容。
现在让我们借助代码示例详细了解此插件的实现。
步骤
步骤 1 - 在第一步中，我们将 Bootstrap CSS 和 magnific 插件 CSS 的 CDN 包含在文档的 <head> 标签内。
步骤 2 - 在下一步中，我们将 Bootstrap JS CDN、jQuery CDN 和 magnific 插件 jQuery CDN 包含在文档的末尾，就在 <body> 标签关闭之前。
步骤 3 - 在此步骤中，我们将添加必须在单击网页上特定按钮时显示的 HTML。在本例中，我们将打开一个来自 youtube 的 iframe 视频，该视频会在单击按钮时打开。
示例
以下示例将演示如何使用 magnific 插件在单击网页上提供的“点击此处打开 iframe 视频”按钮时显示 iframe 视频弹出窗口。
<!DOCTYPE html> <html> <head> <!-- magnific popup css link --> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" > <!-- bootstrap css cdn --> <link href = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"> </head> <body style = "background-color: bisque;"> <center> <h2>Using the Magnific Popup jQuery plugin </h2> <p><b>A iframe video will be open as a popup once you click the below button.</b></p> <br/> <a href = "#iframe-video" class = "open-video btn btn-primary">Click here to open iframe video</a> <div class = "container mfp-hide text-center" id = "iframe-video"> <iframe width = "560" height = "315" src = "https://www.youtube.com/embed/2ejV5PpWD_U" title = "YouTube video player" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div> </center> <!-- jQuery script link --> <script src = "//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- magnific popup jQuery script link --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <!-- bootstrap script cdn --> <script src = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script> $(document).ready(function ($) { $('.open-video').magnificPopup({ type: 'inline', fixContentPos: true, closeBtnInside: false, mainClass: 'mfp-fade' }); }); </script> </body> </html>
在上面的示例中，我们使用了 jQuery 的 magnific popup 插件，在单击网页上提供的“点击此处打开 iframe 视频”按钮时，将 YouTube 上的 iframe 视频作为弹出窗口显示。
让我们再看一个代码示例，在这个示例中，我们将使用多个图像创建图像库，并使其能够在单击图像时显示图像预览，还提供上一张和下一张按钮来查看相应的图像。
算法
此示例和上述示例的算法几乎相同。您只需要用多个图像的 HTML 和一些 jQuery 代码替换上一个示例中显示弹出 iframe 视频的 HTML，使其成为一个画廊。要详细了解，请参见以下示例。
示例
以下示例将说明如何使用 magnific popup 插件构建图像库以及上一个示例中 HTML 的更改。
<!DOCTYPE html> <html lang = "en"> <head> <!-- magnific popup css link --> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"> <!-- bootstrap css cdn --> <link href = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"> </head> <body style = "background-color: bisque;"> <center> <h2>Using the Magnific Popup jQuery plugin </h2> <p><b>The below gallery is amde using the magnific popup plugin of jQuery.</b></p> <br/> <div class = "container"> <div class = "row no-gutters gallerys p-0"> <div class = "col-sm-4 col-12 py-3"> <a href = "https://tutorialspoint.com/computer_logical_organization/images/computer_logical_organization_pdfcover.jpg"> <img src = "https://tutorialspoint.com/computer_logical_organization/images/computer_logical_organization_pdfcover.jpg" style = "border: 15px solid #fff; height: 250px; width: 100%"> </a> </div> <div class = "col-sm-4 col-12 py-3"> <a href = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/5/course_5_image.jpg"> <img src = "https://d3mxt5v3yxgcsr.cloudfront.net/courses/5/course_5_image.jpg" style = "border: 15px solid #fff; height: 250px; width: 100%"> </a> </div> <div class = "col-sm-4 col-12 py-3"> <a href = "https://tutorialspoint.com/artificial_intelligence/images/artificial_intelligence_pdfcover.jpg"> <img src = "https://tutorialspoint.com/artificial_intelligence/images/artificial_intelligence_pdfcover.jpg" style = "border: 15px solid #fff; height: 250px; width: 100%"> </a> </div> <div class = "col-sm-4 col-12 py-3"> <a href = "https://tutorialspoint.com/python/images/python_pdfcover.jpg"> <img src = "https://tutorialspoint.com/python/images/python_pdfcover.jpg" style = "border: 15px solid #fff; height: 250px; width: 100%"> </a> </div> <div class = "col-sm-4 col-12 py-3"> <a href = "https://tutorialspoint.com/cplusplus/images/cplusplus_pdfcover.jpg"> <img src = "https://tutorialspoint.com/cplusplus/images/cplusplus_pdfcover.jpg" style = "border: 15px solid #fff; height: 250px; width: 100%"> </a> </div> <div class = "col-sm-4 col-12 py-3"> <a href = "https://tutorialspoint.com/javascript/images/javascript_pdfcover.jpg"> <img src = "https://tutorialspoint.com/javascript/images/javascript_pdfcover.jpg" style = "border: 15px solid #fff; height: 250px; width: 100%"> </a> </div> </div> </div> </center> <!-- jQuery script link --> <script src = "//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- magnific popup jQuery script link --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <!-- bootstrap script cdn --> <script src = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script> $(document).ready(function ($) { $('.gallerys').magnificPopup({ type: 'image', delegate: 'a', gallery: { enabled: true } }) }); </script> </body> </html>
在此示例中，我们使用了 magnific popup 插件来构建一个带有图像预览和滑块功能的图像库，以便滑动当前图像以查看画廊中上一张或下一张图像。
结论
在本文中，我们学习了 jQuery 中的 magnific popup 插件。我们已经了解了如何使用此插件在我们的网页上构建不同类型的部分。我们借助两个不同的示例详细讨论了此插件。在第一个示例中，我们使用此插件实现了 iframe 弹出逻辑。而在第二个示例中，我们使用该插件实现了图像库。
348 次查看
