Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use the Magnific Popup jQuery plugin?
The Magnific popup is a jQuery plugin that can be used to show some HTML popups on the web page as its name suggests. It is a light-weight, responsive fast and modal dialog jQuery plugin. IT can be used to show any kind of content like images, videos, ajax responses, iframe and image galleries.
There are many ways of using this plugin in your current project that are discussed in in details below −
By downloading the latest version from https://plugins.jquery.com/magnific-popup/ in the form of zip file.
You can also clone the git repository the magnific plugin from https://github.com/dimsemenov/Magnific-Popup.git using the below command in the Git Bash −
git clone https://github.com/dimsemenov/Magnific-Popup.git
To use this plugin, you also need to include the jQuery CDN into your main HTML file. Because at the end, it is a jQuery plugin which requires jQuery for internal processing.
You need to include the magnific CSS as well as magnific script files into your workspace to use the magnific plugin efficiently.
One easiest and the efficient way of using this plugin is by adding the CDNs of the jQuery and the CSS files to your HTML file and use them for using magnific plugin.
CSS file CDN
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
jQuery file CDN
<script src = "https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"> </script>
In this article, we will use the CDNs approach by including CDN of files to our workspace and try to build something using the magnific plugin.
Let us now understand the implementation of this plugin in details with the help of code example.
Steps
Step 1 − In the first step, we will include the CDNs of the Bootstrap CSS and the magnific plugin CSS inside the <head> tag of the document.
Step 2 − In the next step, we will include the Bootstrap JS CDN, jQuery CDN and the magnific plugin jQuery CDN in the end of the document just before closing the <body> tag.
Step 3 − In this step, we will add the HTML that has to be show on click to the particular button on the web page. In this example, we will open an iframe video from youtube that opens up on click to the button.
Example
The below example will show how to use the magnific plugin to show an iframe video popup on click to the button −
<!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>
In the above example, we have used the magnific popup plugin of jQuery to show an iframe video from YouTube as a popup on click to the "Click here to open iframe video" button provided on the web page.
Let us see one more code example in which we will make a images gallery using multiple images and make it able to show image preview on click to an image also provide the next and the previous button to view the corresponding images.
Algorithm
The algorithm of this example and the above example is almost same. You just need to replace the HTML of showing a popup iframe video in previous example with the multiple images HTML and some jQuery code to make it a gallery. To understand it in details, see the below example.
Example
The below example will illustrate the use of magnific popup plugin to build an image gallery and the change in the HTML of previous example −
<!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://www.tutorialspoint.com/computer_logical_organization/images/computer_logical_organization_pdfcover.jpg">
<img src = "https://www.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://www.tutorialspoint.com/artificial_intelligence/images/artificial_intelligence_pdfcover.jpg">
<img src = "https://www.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://www.tutorialspoint.com/python/images/python_pdfcover.jpg">
<img src = "https://www.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://www.tutorialspoint.com/cplusplus/images/cplusplus_pdfcover.jpg">
<img src = "https://www.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://www.tutorialspoint.com/javascript/images/javascript_pdfcover.jpg">
<img src = "https://www.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/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>
In this example, we used the magnific popup plugin to build a images gallery with image preview and the slider feature to slide the current image to see the previous or the next image in the gallery.
Conclusion
In this article, we have learned about the magnific popup plugin in jQuery. We have seen how we can use this plugin to build different kind of sections on our web page. We have discussed this plugin in details with help of two different examples. In the former one, we implement the iframe popup logic using this plugin. While, in the later one we implement an image gallery using the plugin.
73 Views
