Magnific Popup is a fast, light, mobile-friendly and responsive lightbox and modal dialog jQuery plugin. It can be used to open inline HTML, ajax loaded content, image, form, iframe (YouTube video, Vimeo, Google Maps), and photo gallery. It has added animation effects using CSS3 transitions.
Installation Process: There are several ways to start using this plugin:
- Download the zipped folder of the latest version of Magnific Popup from here.
- Alternatively, clone the Github Repository to any desired location by executing the following command in the Git Bash.
git clone https://github.com/dimsemenov/Magnific-Popup.git
- Since the Magnific is a plugin of the jQuery framework, it needs to reference the jQuery library. This can be done by using the Google-hosted version of jQuery or downloading and using the distribution files.
-
Include CSS: Add the magnific-popup.css file from the dist folder of Magnific.
<linkrel="stylesheet"type="text/css"href="path/magnific-popup.css">
-
Include JavaScript: Add the jquery.magnific-popup.min.js file from the dist folder of Magnific.
<scripttype="text/javascript"src="path/jquery.magnific-popup.min.js"></script>
Example 1: This example shows a popup using the plugin.
html
<!DOCTYPE html> <html>
<head>
<!-- Include CSS of Magnific Popup -->
<link rel="stylesheet" type="text/css"
href="css/magnific-popup.css">
</head>
<body style="text-align:center;">
<!-- Button to open popup -->
<button>
<a href="#popup-info" class="open-popup"
style="text-decoration: none;">
Click to Open PopUp
</a>
</button>
<!-- Popup to display -->
<div id="popup-info" class="mfp-hide" style=
"text-align:center;
background:white;height:600px;">
<h1 style="color: green;">
GEEKSFORGEEKS
</h1>
<div style="font-size: 15px;
font-weight: bold;">
WELCOME TO GEEKSFORGEEKS
</div>
</div>
<!-- Include jQuery -->
<script src=
</script>
<!-- Include the Magnific Popup JavaScript -->
<script type="text/javascript" src="js/jquery.magnific-popup.min.js">
</script>
<script type="text/javascript">
$(document).ready(function ($) {
$('.open-popup').magnificPopup({
type: 'inline',
// Fixed position will be used
fixContentPos: true,
// Since disabled, Magnific Popup
// will not put close button
// inside content of popup
closeBtnInside: false,
preloader: false,
// Delay in milliseconds before
// popup is removed
removalDelay: 160,
// Class that is added to
// popup wrapper and background
mainClass: 'mfp-fade'
});
});
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
Example 2: This example shows a popup with an image using the plugin. The gallery module allows us to switch the content of the popup and adds navigation arrows.
html
<!DOCTYPE html> <html>
<head>
<!--Bootstrap CSS-->
<link rel="stylesheet" href=
<!--Magnific Popup CSS-->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
</head>
<body style="text-align:center;">
<h1 style="color: blue;">
:GALLERY:
</h1>
<!--Gallery-->
<div class="container ">
<div class="row no-gutters gallery" style="padding:0;">
<!--Image 1-->
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<a href="images/gfg-logo.png">
<img src="images/gfg-logo.png" style="height:300px; width:100%;">
</a>
</div>
<!--Image 2-->
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<a href="images/gfg-logo2.png">
<img src="images/gfg-logo2.png" style="height:300px; width:100%;">
</a>
</div>
<!--Image 3-->
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<a href="images/gfg-promo.jpg">
<img src="images/gfg-promo.jpg" style="height:300px; width:100%;">
</a>
</div>
<!--Image 4-->
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<a href="images/gfg-promo2.jpg">
<img src="images/gfg-promo2.jpg" style="height:300px; width:100%;">
</a>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src=
</script>
<script src=
</script>
<script src=
</script>
<!-- Magnific Popup JavaScript-->
<script type="text/javascript" src=
"js/jquery.magnific-popup.min.js">
</script>
<script type="text/javascript">
$(document).ready(function ($) {
$('.gallery').magnificPopup({
type: 'image',
// To invoke the popup
// using the 'a' tag
delegate: 'a',
// Enable the gallery
gallery: {
enabled: true
}
});
});
</script>
</body>
</html>
|
Output:
-
Before clicking on an image:
-
After clicking on any image:
Reference: Magnific Popup Documentation