Magnific Popup : Responsive jquery | How to Implement Magnific Popup [ OverView ]
What is Magnific Popup jquery articles ACTE

Magnific Popup: Responsive jquery | How to Implement Magnific Popup [ OverView ]

Last updated on 03rd Jan 2022, Blog, General

About author

Prakash ( )

High level Domain Expert in TOP MNCs with 8+ Years of Experience. Also, Handled Around 16+ Projects and Shared his Knowledge by Writing these Blogs for us.

(5.0) | 16354 Ratings 3170

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.

Subscribe For Free Demo

    • Introduction to Magnific Popup
    • Ajax Type
    • Gallery
    • Multiple Galleries
    • Slow loading
    • Conclusion

    Introduction to Magnific Popup:

    Integrate Dmitry Semenov’s great Popup jQuery Lightbox plugin with Drupal as a field formatter. This module provides “fantastic popup” field formatters for file entity and image fields. Fields with multiple items (cardinality > 1) can be grouped in a spectacular popup gallery, or shown individually as a stand-alone popup (no “prev”/”next” navigation options) .

    From the author of the jQuery plugin: Magnific Popup is a responsive jQuery lightbox plugin focused on performance and providing the best user experience with any device (Zepto.js compatible).

    JQuery plugin supports:

  • single-image lightbox
  • zoom-gallery
  • Lightbox Gallery
  • Popup with video or map
  • popup with form
  • modal popup
  • Ajax Popup
  • css animations
  • Integration with other modules

  • Optional Sub-module Magnificent Popup Combining YouTube with Media: The YouTube module allows for easy embedding of YouTube Pop-ups.

  • dependency
  • 7.x Branch
  • libraries
  • file unit
  • jQuery Update (requires jQuery 1.7.2 or above – see notes under Installation below)
  • 8.x branch
  • None


    7.x Branch:

  • Install the required dependencies (Library, File Entity, jQuery Update, as listed above).
  • Configure jQuery Update to provide version 1.7.2 or higher (configured at admin/config/development/jquery_update). IMPORTANT NOTE: TL; DR (Small Version): Use jQuery Update 7.x-2.6 or later and select the jQuery branch “1.7” or later.

  • Long version: jQuery update 7.x-2.6 (June 17, 2015) provides 1.7.2+. If you are using an older version of jQuery Update, selecting jQuery “1.7” is insufficient: either use the newer version of jQuery Update or 1.7.2+ (#2466329: Updates 1.7 to 1.7.2) Apply or use patch to provide “1.8” or higher jQuery branch. Note that selecting jQuery 1.8+ may break some JS (especially the admin overlay), see #1951588: jQuery 1.8+ Breaks Core JavaScript (patch provided). Or, for the adventurous, jQuery 1.9+ is fairly stable in contribution, and most compatibility issues can be mitigated by using the jQuery migrate library.

    • Install the third-party Magnific Popup library as “magnific-popup” under Site/Site/Library (where SITE is “all,” “default,” etc.).
    • In order to be detected and used correctly, the JS and CSS must be located at these paths (where “library” is site/site/library as described above):
    • library/magnific-popup/district/jquery.magnific-popup.js
    • library/magnific-popup/district/magnific-popup.css
    • Activate the Fantastic Popup module, then manage the display of any file or image field at admin/structure/types/manage/types/display. Select “Magnific Popup” as the formatter and optionally configure gallery style options on the field. An example “photo gallery” image field:
    • Photo gallery field using great popup format
    • By default, item thumbnails will use the “magnific_popup_thumbnail” image style. You can configure this image style under Image Styles at admin/config/media/image-styles/edit/magnific_popup_thumbnail.

    8.x branch:

    • Under DRUPAL_ROOT/libraries install the third-party fantastic popup library as “fantastic-popup”.
    • In order to be detected and used correctly, the JS and CSS must be located on these paths:
    • library/magnific-popup/district/jquery.magnific-popup.min.js
    • library/magnific-popup/district/magnific-popup.css
    • Paths that do not use the “dist” folder (for versions before 8.x-1.3) are still supported. Although it is advisable to update the paths to use the “dist” folder.
    • Activate the fancy popup module, then manage the display of any image field or video_embed_field field. Select “Magnific Popup” as the formatter and optionally configure gallery style options on the field.
    • Attachment Size
    • MFP_Field_Formatter.jpg 16.4 KB

Course Curriculum

Develop Your Skills with Advanced jQuery Certification Training

Weekday / Weekend BatchesSee Batch Details

    Ajax Type:

    To create this type of popup, first define the path to the file you want to display and select the Ajax type of the popup. The popup should be styled exactly like the inline popup type.

    • Important article! The content of the file you load is already a popup, so there should only be one parent element.
    • <'a href="path-to-file.html" class="ajax-popup-link">Show inline popup<'/a>
    • $(‘.ajax-popup-link’).magnificPopup({
    • type: ‘ajax’
    • ,
    • Note that the path to the file to be loaded must be of the same origin (eg on the same domain), learn more.
    • Ajax Options:
    • Ajax: {
    • settings: null, // Ajax Settings object which will extend the default one –
    • // for example:
    • //settings: {cache: false, async: false}
    • cursor: ‘mfp-ajax-cur’, // CSS class that will be added to the body during loading (adds “progress” cursor)
    • tError: ‘<'a href="%url%">content could not be loaded.’ // error message, may contain %curr% and %total% tags if gallery is enabled
    • ,
    • To modify the content after it’s loaded, or to select and show only the specific element from the loaded file, there is a parseAjax callback:
    • callback: {
    • parseAjax: function (mfp response) {
    • // is a “data” object from the Ajax “success” callback
    • // For simple HTML file, it will just be string
    • // You can modify this to change the content of the popup
    • // For example, to show just #some-element:
    • // = $(‘#some-element’);
    • // must be a string or a DOM (jQuery) element
    • console.log(‘Ajax content loaded:’, bfpResponse);
    • ,
    • Ajax Content Added: function () {
    • // Ajax content is loaded and added to the DOM
    • console.log(this content);
    • ,
    • ,


    The Gallery module allows you to switch the content of the popup and add navigation arrows. It can switch and mix any type of content, not just images. Gallery Options:

    • Gallery: {
    • enabled: false, // set to true to enable gallery
    • preload: [0,2], // Read about this option in the next lazy-loading section
    • navigateByImgClick: true,
    • arrow markup: ‘<'button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"><'/button>‘, // Markup of an arrow button
    • tPrev: ‘Prev (left arrow key)’, // title for left button
    • next: ‘next (right arrow key)’, // title for right button
    • tCounter: ‘<'span class="mfp-counter">%curr% of%total%‘ // Markup of counter
    • ,
    • Example:
    • // This will create a single gallery from all the elements with class “gallery-item”
    • $(‘.gallery-item’).magnificPopup({
    • type: ‘image’,
    • Gallery:{
    • Enabled: True
    • ,
    • ,

    Multiple Galleries:

    To have multiple galleries on one page, you need to create a new instance of Fantastic Popup for each different gallery. for example

    • <'div class="Gallery">
    • <'a href="path-to-image.jpg">Open Image 1 (Gallery #1)<'/a>
    • <'a href="path-to-image.jpg">Open Image 2 (Gallery #1)<'/a>
    • <'div class="Gallery">
    • <'a href="path-to-image.jpg">Open Image 1 (Gallery #2)<'/a>
    • <'a href="path-to-image.jpg">Open Image 2 (Gallery #2)<'/a>
    • <'a href="" class="mfp-iframe">Open the video (Gallery #2). The class mfp-iframe forces the “iframe” content type on this item.<'/a>
    • <'/div>
    • $(‘.gallery’).each(function() { // container for all your galleries
    • $(this).
    • delegate: ‘a’, // selector for gallery item
    • type: ‘image’,
    • Gallery: {
    • Enabled: True
    • ,
    • ,
    • ,

    You don’t need to use the delegate option, it can just be $(this). find(‘a’). magnificPopup ( ….

    Slow loading:

    The lazy-loading option preloads nearby objects. It accepts an array with two integers. The first is the number of items to preload before the current one. The second is the number of images to preload after the current one. For example, preload: [1,3] 3 will load the next item and 1 which is before the current one. These values ​​are automatically switched based on the direction of motion.

    All it does by default is just search for an image tag and preload it with JavaScript. But you can extend it and do your custom preloading logic with the help of lazy load event, like this:

    • callback: {
    • lazy load: function(item) {
    • console.log(item); // grand popup data object that should be loaded
    • ,
    • ,
    • The “Preload” option can be changed dynamically. To disable it, set preload:0.
    • Animation
    • Animations can be added to any instance. For Ajax based popup content the animation is fired only after the content is loaded.
    • The popup wrapper and background overlay class becomes MFP-ready once the popup is opened. They get the square mfp-removing before the popup is removed.
    • for example:
    • // initialise popup as usual
    • $(‘.popup-link’).magnificPopup({
    • // delay in milliseconds before popup removal
    • Delay in deletion: 300,
    • // class that is added to the popup wrapper and background
    • // Apply your CSS animations to this exact popup to make it unique
    • Main class: ‘mfp-fade’
    • ,
    • So just play with CSS3 changes:
    • /* initially overlay */
    • .mfp-fade.mfp-bg {
    • Opacity: 0;
    • -webkit-transition: all 0.15s out smoothly;
    • -moz-transition: all 0.15s out smoothly;
    • Transition: all 0.15s out smoothly;
    • ,
    • /* in overlay animate */
    • .mfp-fade.mfp-bg.mfp-ready {
    • Opacity: 0.8;
    • ,
    • /* animate overlay */
    • .mfp-fade.mfp-bg.mfp-delete {
    • Opacity: 0;
    • ,
    • /* Content at start */
    • .mfp-fade.mfp-wrap .mfp-content {
    • Opacity: 0;
    • -webkit-transition: all 0.15s out smoothly;
    • moz-transition: all 0.15s out smoothly;
    • Transition: all 0.15s out smoothly;
    • ,
    • /* Content Animate it */
    • .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    • Opacity: 1;
    • ,
    • /* animate content out */
    • .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    • Opacity: 0;
    • ,

    Please use animation wisely and when it is really needed. Don’t enable it when your popup contains a large image or a lot of HTML text.

JQuery Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download


  • Magnificent popups are a variation of the usual way of displaying images or text in a modal window. The effect is commonly called “Lightbox”, named after one of the native JavaScript libraries. There are many different JavaScript libraries that you can use to achieve this same effect. Magnificent allows the use of multiple content types in its modals: images, inline (HTML), iframes, and AJAX. For our purposes, you’re probably only interested in images and maybe inline types.

  • The primary advantage of Magnific is that its methods are responsive. So, the pop ups will adjust to the size of the browser window. Magnific Pop Up is a lightweight jQuery that allows us to create gallery pages with great convenience. The only thing you’ll need is the css and js files that the grand popup requires and a few lines of extra js script in the page itself to add the desired content to its js class.

Are you looking training with Right Jobs?

Contact Us

Popular Courses

Get Training Quote for Free