How to use the Magnific Popup jQuery plugin?

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <link rel="stylesheet" type="text/css" href="path/magnific-popup.css">

    chevron_right

    
    

  • Include JavaScript: Add the jquery.magnific-popup.min.js file from the dist folder of Magnific.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script type="text/javascript" src="path/jquery.magnific-popup.min.js"></script>

    chevron_right

    
    

Example 1: This example shows a popup using the plugin.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 



  • Before clicking the button:

Before clicking button

  • After clicking the button:

After clicking on 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 

  • Before clicking on an image:

  • After clicking on any image:

Reference: Magnific Popup Documentation

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.