Skip to content
Related Articles

Related Articles

How to use the Magnific Popup jQuery plugin?
  • Last Updated : 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
  • 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
Recommended Articles
Page :