How to use the Magnific Popup jQuery plugin? - GeeksforGeeks

14 Jul, 2020
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
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.<link rel="stylesheet" type="text/css" href="path/magnific-popup.css">
<link rel="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.<script type="text/javascript" src="path/jquery.magnific-popup.min.js"></script>
<script type="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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">      <!--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="https://code.jquery.com/jquery-3.5.1.slim.min.js">    </script>    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">    </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:
Before clicking on an image:
After clicking on any image:
After clicking on any image:
Reference: Magnific Popup Documentation
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
jQuery-Misc
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)