資料結構
網路
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/npm/bootstrap@5.3.0/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/npm/bootstrap@5.3.0/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/npm/bootstrap@5.3.0/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.tw/computer_logical_organization/images/computer_logical_organization_pdfcover.jpg">
<img src = "https://tutorialspoint.tw/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.tw/artificial_intelligence/images/artificial_intelligence_pdfcover.jpg">
<img src = "https://tutorialspoint.tw/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.tw/python/images/python_pdfcover.jpg">
<img src = "https://tutorialspoint.tw/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.tw/cplusplus/images/cplusplus_pdfcover.jpg">
<img src = "https://tutorialspoint.tw/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.tw/javascript/images/javascript_pdfcover.jpg">
<img src = "https://tutorialspoint.tw/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/npm/bootstrap@5.3.0/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 次檢視
