Here you can find the guide on how to use Magnific Popup. Besides this docs page, you can play with examples on CodePen. If you’ve found any mistake in this site or you know how to improve some part of this documentation - please commit on GitHub.

Please ask general questions through Stack Overflow tagged with

  Open popup 1
  Open popup 2
  Open popup 3

9.

If you’re looking for touch-friendly popup just for images, PhotoSwipe might be a better choice.

• Select2 plugin is inactive when added inside popup

Including files

You can get Magnific Popup JS and CSS file from the , from the

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

0 folder in the GitHub repository, or by compiling it yourself with Grunt.

It’s not required, but we recommend placing CSS files in

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

1 and JavaScript files and initialization code in the footer of your site (before the closing

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

2 tag). If you already have

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

3 on your site, don’t include it a second time, or use

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

4 mode. Optionally, you can include Zepto.js instead of jQuery, or choose which one to include based on browser support.

Popup initialization code should be executed after document ready, for example:

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

There are three ways to initialize a popup:

1. From an HTML element

Open popup

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

2. From a group of elements with one parent

Same as first one, but use this method if you are creating a popup from a list of elements in one container. Note that this method does not enable gallery mode, it just reduces the number of click event handlers; each item will be opened as a single popup. If you wish to enable gallery, add the

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

5 option.

  Open popup 1
  Open popup 2
  Open popup 3

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

3. From the ‘items’ option

The

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

6 option defines data for the popup item(s) and makes Magnific Popup ignore all attributes on the target DOM element. The value for

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

6 can be a single object or an array of objects.

// Example with single object
$('
# some-button').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // this is default type
});
// Example with multiple objects
$('
# some-button').magnificPopup({
    items: [
      {
        src: 'path-to-image-1.jpg'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('
Dynamically created element
'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '
HTML string
',
        type: 'inline'
      },
      {
        src: '
# my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});

Play with this example on CodePen.

Content Types

By default, Magnific Popup has four types of content:

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

8,

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

9,

// Example with single object
$('
# some-button').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // this is default type
});
// Example with multiple objects
$('
# some-button').magnificPopup({
    items: [
      {
        src: 'path-to-image-1.jpg'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('
Dynamically created element
'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '
HTML string
',
        type: 'inline'
      },
      {
        src: '
# my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});

0, and

// Example with single object
$('
# some-button').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // this is default type
});
// Example with multiple objects
$('
# some-button').magnificPopup({
    items: [
      {
        src: 'path-to-image-1.jpg'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('
Dynamically created element
'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '
HTML string
',
        type: 'inline'
      },
      {
        src: '
# my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});

1. There is no any “auto-detection” of type based on URL, so you should define it manually.

The type of a popup can be defined in a two ways:

1. Using the

   // Example with single object $('

   some-button').magnificPopup({

   items: {  
     src: 'path-to-image-1.jpg'  
   },  
   type: 'image' // this is default type  
   

   });

   // Example with multiple objects $('

   some-button').magnificPopup({

   items: [  
     {  
       src: 'path-to-image-1.jpg'  
     },  
     {  
       src: 'http://vimeo.com/123123',  
       type: 'iframe' // this overrides default type  
     },  
     {  
       src: $('
   Dynamically created element
   '), // Dynamically created element  
       type: 'inline'  
     },  
     {  
       src: '
   HTML string
   ',  
       type: 'inline'  
     },  
     {  
       src: '
   

   # my-popup', // CSS selector of an element on page that should be used as a popup

       type: 'inline'  
     }  
   ],  
   gallery: {  
     enabled: true  
   },  
   type: 'image' // this is default type  
   

   });

   2 option. E.g.:

   // Example with single object $('

   some-button').magnificPopup({

   items: {  
     src: 'path-to-image-1.jpg'  
   },  
   type: 'image' // this is default type  
   

   });

   // Example with multiple objects $('

   some-button').magnificPopup({

   items: [  
     {  
       src: 'path-to-image-1.jpg'  
     },  
     {  
       src: 'http://vimeo.com/123123',  
       type: 'iframe' // this overrides default type  
     },  
     {  
       src: $('
   Dynamically created element
   '), // Dynamically created element  
       type: 'inline'  
     },  
     {  
       src: '
   HTML string
   ',  
       type: 'inline'  
     },  
     {  
       src: '
   

   # my-popup', // CSS selector of an element on page that should be used as a popup

       type: 'inline'  
     }  
   ],  
   gallery: {  
     enabled: true  
   },  
   type: 'image' // this is default type  
   

   });

   3.
2. Using the

   // Example with single object $('

   some-button').magnificPopup({

   items: {  
     src: 'path-to-image-1.jpg'  
   },  
   type: 'image' // this is default type  
   

   });

   // Example with multiple objects $('

   some-button').magnificPopup({

   items: [  
     {  
       src: 'path-to-image-1.jpg'  
     },  
     {  
       src: 'http://vimeo.com/123123',  
       type: 'iframe' // this overrides default type  
     },  
     {  
       src: $('
   Dynamically created element
   '), // Dynamically created element  
       type: 'inline'  
     },  
     {  
       src: '
   HTML string
   ',  
       type: 'inline'  
     },  
     {  
       src: '
   

   # my-popup', // CSS selector of an element on page that should be used as a popup

       type: 'inline'  
     }  
   ],  
   gallery: {  
     enabled: true  
   },  
   type: 'image' // this is default type  
   

   });

   4 CSS class (where

   // Example with single object $('

   some-button').magnificPopup({

   items: {  
     src: 'path-to-image-1.jpg'  
   },  
   type: 'image' // this is default type  
   

   });

   // Example with multiple objects $('

   some-button').magnificPopup({

   items: [  
     {  
       src: 'path-to-image-1.jpg'  
     },  
     {  
       src: 'http://vimeo.com/123123',  
       type: 'iframe' // this overrides default type  
     },  
     {  
       src: $('
   Dynamically created element
   '), // Dynamically created element  
       type: 'inline'  
     },  
     {  
       src: '
   HTML string
   ',  
       type: 'inline'  
     },  
     {  
       src: '
   

   # my-popup', // CSS selector of an element on page that should be used as a popup

       type: 'inline'  
     }  
   ],  
   gallery: {  
     enabled: true  
   },  
   type: 'image' // this is default type  
   

   });

   5 is the desired content type). For example:

   // Example with single object $('

   some-button').magnificPopup({

   items: {  
     src: 'path-to-image-1.jpg'  
   },  
   type: 'image' // this is default type  
   

   });

   // Example with multiple objects $('

   some-button').magnificPopup({

   items: [  
     {  
       src: 'path-to-image-1.jpg'  
     },  
     {  
       src: 'http://vimeo.com/123123',  
       type: 'iframe' // this overrides default type  
     },  
     {  
       src: $('
   Dynamically created element
   '), // Dynamically created element  
       type: 'inline'  
     },  
     {  
       src: '
   HTML string
   ',  
       type: 'inline'  
     },  
     {  
       src: '
   

   # my-popup', // CSS selector of an element on page that should be used as a popup

       type: 'inline'  
     }  
   ],  
   gallery: {  
     enabled: true  
   },  
   type: 'image' // this is default type  
   

   });

   6,

   // Example with single object $('

   some-button').magnificPopup({

   items: {  
     src: 'path-to-image-1.jpg'  
   },  
   type: 'image' // this is default type  
   

   });

   // Example with multiple objects $('

   some-button').magnificPopup({

   items: [  
     {  
       src: 'path-to-image-1.jpg'  
     },  
     {  
       src: 'http://vimeo.com/123123',  
       type: 'iframe' // this overrides default type  
     },  
     {  
       src: $('
   Dynamically created element
   '), // Dynamically created element  
       type: 'inline'  
     },  
     {  
       src: '
   HTML string
   ',  
       type: 'inline'  
     },  
     {  
       src: '
   

   # my-popup', // CSS selector of an element on page that should be used as a popup

       type: 'inline'  
     }  
   ],  
   gallery: {  
     enabled: true  
   },  
   type: 'image' // this is default type  
   

   });

   7.

The second option always overrides the first, so you may initialize popups with multiple content types from one call.

// Example with single object
$('
# some-button').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // this is default type
});
// Example with multiple objects
$('
# some-button').magnificPopup({
    items: [
      {
        src: 'path-to-image-1.jpg'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('
Dynamically created element
'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '
HTML string
',
        type: 'inline'
      },
      {
        src: '
# my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});

0 is the default content type (from v0.8.4), so you may skip its definition.

The source of the the popup content (for example, a path to an image, a path to an HTML file, a path to a video page) can be defined in a few ways:

Method

1: From the

// Example with single object
$('
# some-button').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // this is default type
});
// Example with multiple objects
$('
# some-button').magnificPopup({
    items: [
      {
        src: 'path-to-image-1.jpg'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('
Dynamically created element
'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '
HTML string
',
        type: 'inline'
      },
      {
        src: '
# my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});

9 attribute:

Open image

Method

2: From the

Open image

0 attribute (overrides the first method):

Open image

Method

3: From the

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

6 option

$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});

If you want to modify how the source is parsed, you may hook into the

Open image

2 callback. For example:

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

0

Image Type

The path to the image must be set as the main source if you selected this type. If your popup doesn’t have an image source and doesn’t have an image that shouldn’t be preloaded (and retina-ized, etc.), use the

// Example with single object
$('
# some-button').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // this is default type
});
// Example with multiple objects
$('
# some-button').magnificPopup({
    items: [
      {
        src: 'path-to-image-1.jpg'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('
Dynamically created element
'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '
HTML string
',
        type: 'inline'
      },
      {
        src: '
# my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});

0 type.

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

1

Please note that Magnific Popup doesn’t implement any JavaScript-based client-side caching for images. So make sure that your server so the image won’t be downloaded each time.

Iframe Type

By default Magnific Popup supports only one type of URL for each service:

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

2

But you can extend it and make it support absolutely any URL or any other service (view example that adds Dailymotion support). Iframe options:

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

3

Inline Type

To create popup from inline element you need to:

1. Create a HTML element that you wish to display in popup and add it somewhere. Class

Open image

4 is required to hide the popup from the page.

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

4

2. Style this element. Magnific Popup by default doesn’t apply any styles to it, except vertical centering (if

Open image

5). Close button will be automatically appended inside (if

Open image

6).

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

5

3. Add button that will open the popup (source must match CSS id of an element (

Open image

7 in our case).

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

6

4. Initialize script.

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

7

Here are some other ways to initialize popup:

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

8

I have created two examples on CodePen that will help you better understand how it works:

• Simple inline popup
• Advanced popup with markup and gallery mode

Ajax Type

To create such type of popup, first of define the path to the file that you wish to display and select

// Example with single object
$('
# some-button').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // this is default type
});
// Example with multiple objects
$('
# some-button').magnificPopup({
    items: [
      {
        src: 'path-to-image-1.jpg'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('
Dynamically created element
'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '
HTML string
',
        type: 'inline'
      },
      {
        src: '
# my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});

1 type of the popup. Popup itself should be styled in exactly the same way as an .

Important note! The contents of the file that you load is already a popup itself, so there must be only one root element.

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

9

Open popup

0

Note that path to the file that will be loaded should have the same origin (e.g. be on the same domain), learn more.

Ajax options:

Open popup

1

To modify content after it’s loaded, or to select and show just specific element from loaded file, there is a

Open image

9 callback:

Open popup

2

Options

Options should be passed to the initialization code and separated by comma, e.g.:

Open popup

3

Options for specific modules are explained in their sections of documentation (e.g. related to text are in , related to gallery are in . Here you can find the list of general options:

disableOn

Open image

0

If window width is less than the number in this option lightbox will not be opened and the default behavior of the element will be triggered. Set to

Open image

1 to disable behavior. Option works only when you initialize Magnific Popup from DOM element.

Can also accept Function as a parameter, which should return

Open image

2 if lightbox can be opened and

Open image

3 otherwise. For example:

Open popup

4

key

Open image

0

“Key” option is a unique identifier of a single or a group of popups with the same structure. If you will not define it, DOM elements will be created and destroyed each time when you open and close popup.

You may (and should) set an equal key to different popups if their markup matches. By markup I mean options that change HTML structure of the popup (e.g. close icon placement and HTML code of it).

For example: you have many popups that show title, some text and button - you may use one key for all of them, so only one instance of this element is created. Same for popup that always contains image and caption.

You can delete cached templates like so:

Open popup

5

midClick

Open image

3

If set to

Open image

2 lightbox is opened if the user clicked on the middle mouse button, or click with Command/Ctrl key. Option works only when you initialize Magnific Popup from DOM element.

mainClass

Open image

7

String that contains classes that will be added to the root element of popup wrapper and to dark overlay. For example

Open image

8, can also contain multiple classes -

Open image

9.

preloader

Open image

2

Preloader in Magnific Popup is used as an indicator of current status. If option enabled, it’s always present in DOM only text inside of it changes. Below you can see explanation of CSS names that are applied to container that holds preloader and content area depending on the state of current item:

Open popup

6

For example, if you want your error message to be in red add such CSS:

Open popup

7

You can trigger change of status manually by calling

$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});

1.

focus

Open image

7

String with CSS selector of an element inside popup that should be focused. Ideally it should be the first element of popup that can be focused. For example

$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});

3 or

$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});

4. Leave empty to focus the popup itself.

closeOnContentClick

Open image

3

Close popup when user clicks on content of it. It’s recommended to enable this option when you have only image in popup.

closeOnBgClick

Open image

2

Close the popup when user clicks on the dark overlay.

closeBtnInside

Open image

2

If enabled, Magnific Popup will put close button inside content of popup, and wrapper will get class

$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});

8 (which in default CSS file makes color of it change). If markup of popup item is defined element with class

$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});

9 it will be replaced with this button, otherwise close button will be appended directly.

showCloseBtn

Open image

2

Controls whether the close button will be displayed or not.

enableEscapeKey

Open image

2

Controls whether pressing the escape key will dismiss the active popup or not.

modal

Open image

3

When set to

Open image

2, the popup will have a modal-like behavior: it won’t be possible to dismiss it by usual means (close button, escape key, or clicking in the overlay).

This is a shortcut to set

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

04,

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

05,

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

06, and

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

07 to

Open image

3.

alignTop

Open image

3

If set to

Open image

2 popup is aligned to top instead of to center. (basically all this option does is adds

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

11 CSS class to popup which removes styles that align popup to center).

index

Open image

0

Used for gallery. Defines starting index. If popup is initialised from DOM element, this option will be ignored.

fixedContentPos

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

13

Popup content position. Can be

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

14,

Open image

2 or

Open image

3. If set to

Open image

2 - fixed position will be used, to

Open image

3 - absolute position based on current scroll. If set to

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

14 popup will automatically disable this option when browser doesn’t support fixed position properly.

fixedBgPos

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

13

Same as an option above, but it defines position property of the dark transluscent overlay. If set to

Open image

3 - huge tall overlay will be generated that equals height of window to emulate fixed position. It’s recommended to set this option to

Open image

2 if you animate this dark overlay and content is most likely will not be zoomed, as size of it will be much smaller.

overflowY

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

13

Defines scrollbar of the popup, works as overflow-y CSS property - any CSS acceptable value is allowed (e.g.

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

13,

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

25,

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

26). Option is applied only when fixed position is enabled.

There is no option

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

27, but you may easily emulate it just via CSS.

removalDelay

Open image

1

Delay before popup is removed from DOM. Used for the .

closeMarkup

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

29

Markup of close button. %title% will be replaced with option

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

30.

prependTo

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

31

The DOM element to which popup will be added. Useful when you’re using ASP.NET where popup should be inside

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

32. Option available since 2013/12/04.

autoFocusLast

Open image

2

If set to

Open image

2 last focused element before popup showup will be focused after popup close. Option available since 2015/12/16.

Gallery

The gallery module allows you to switch the content of the popup and adds navigation arrows. It can switch and mix any types of content, not just images. Gallery options:

Open popup

8

Example:

Open popup

9

Multiple galleries

To have multiple galleries on a page, you need to create a new instance of Magnific Popup for each separate gallery. For example

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

0

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

1

You don’t necessarily need to use

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

35 option, it can be just

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

36.

Lazy-loading

Lazy-loading option preloads nearby items. It accepts an array with two integers. The first is the number of items to preload before the current. The second is the number of images to preload after the current. For example,

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

37 will load 3 next items and 1 that is before current. These values are automatically switched based on direction of movement.

By default all what it does is just searches for an image tag and preloads it with JavaScript. But you can extend it and do your custom preloading logic with help of

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

38 event, like so:

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

2

“Preload” option can be changed dynamically. To disable it set

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

39.

Animation

Animation can be added to any example. For Ajax based popup content animation is fired only after content is loaded.

After popup is opened popup wrapper and background overlay get class

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

40. Before popup is removed they get class

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

41.

For example:

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

3

Then just play with CSS3 transitions:

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

4

Please use animation wisely and when it’s really required. Do not enable it when your popup may contain large image or a lot of HTML text.

Retina

“Retina” module allows you to display high-resolution images on high-dpi screens with different

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

42. Module works only with “image” type and only when

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

43.

First of prepare two sets of images. Default supported syntax requires

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

44 at the end of the image file name, e.g.:

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

45 >

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

46. Then initialize popup as usual and add

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

47 in retina set of options.

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

5

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

6

View example of retina popup on CodePen.

Zoom effect

Zooming only works for images, for now. To add zooming effect, first of make sure that you included “zoom” module to Magnific Popup build (since v0.9.1.). Then follow steps:

1. Add the thumbnail with link that will open the popup, for example:

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

7

You need to make sure that ratio of your thumbnail matches the ratio of the big image, to avoid “jumps” at the end of zoom-out animation.

2. Initialize popup with

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

48 options:

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

8

3. Optionally, add CSS fading animation to background overlay

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

9

Zoom module adds

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

49 callback, which fires when zoom-in animation is finished.

API

There is a much bigger list of public events, methods and variables than provided here which is used for module development, look inside code or type in console

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

50 to find them, if you think that something should be added to docs - please submit commit.

Events

You can define callbacks in

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

51 option. Besides that, all Magnific Popup events are also dispatched using

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

52 on target element (or to document if the element doesn’t exist).

  Open popup 1
  Open popup 2
  Open popup 3

0

List of callbacks. In each callback

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

53 is

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

54, so you can execute methods (

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

55. or access public variables (

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

56).

  Open popup 1
  Open popup 2
  Open popup 3

1

Public methods

  Open popup 1
  Open popup 2
  Open popup 3

2

You may also call ANY method via

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

57 after you initialized the popup, for example:

  Open popup 1
  Open popup 2
  Open popup 3

3

You may also open the popup directly at initialization:

  Open popup 1
  Open popup 2
  Open popup 3

4

Public properties

Most properties are available only after the popup is opened. Only most used are listed here.

  Open popup 1
  Open popup 2
  Open popup 3

5

Translating

Internationalization of Magnific Popup is very simple, all you need is to extend default settings object with new values, or just pass options to your initialization code. If you’re making some public plugin or theme, it’s strongly recommended to use only second method to avoid conflicts.

Some properties contain %keys% that should not be translated, but may be reordered or removed.

  Open popup 1
  Open popup 2
  Open popup 3

6

Same thing, but applied only to specific slider:

  Open popup 1
  Open popup 2
  Open popup 3

7

FAQ

How to place gallery navigation arrows “inside” the image?

See example on CodePen.

How to override some function without modifying the source files?

Rewrite the function that you wish to modify by editing Magnific Popup object, you can access it like so

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

54. For example to override function that goes to “next” item in gallery:

  Open popup 1
  Open popup 2
  Open popup 3

8

You may override any public function, just note that this change applies globally.

How to add spinner indicator instead of “Loading…” text?

Just style element with class

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

59. Example on CodePen. Another example (if you want to show image only after its fully loaded).

Known issues

When popup is opened scrollbar of window disappears and creates empty space or shifts some fixed-positioned menu (or whatever)

Solution 1: add option to force the scrollbar. Solution 2: use open/close popup callbacks to apply custom styling to menu that behaves incorrectly.

Refer to this discussion on GitHub.

Make Magnific Popup better!

Improve this documentation page (simply submit commit via GitHub). Any improvements, including your own CodePen examples are very welcome. And, lastly, don’t forget to star the script on GitHub:

How do you fix undefined properties that cannot be read?

The error can be fixed by creating a variable to hold the name of the file. This will fix the error and will not change anything in your application.

How to resolve cannot read properties of undefined reading 0 ')?

It's often easier to simply check for the particular array-like types that you're actually using. This is the easiest solution to mitigate the Cannot read property '0' of undefined error. You can also use it to check if an argument of a function is undefined or not.