What is magnific-popup?

dimsemenov/magnific-popup — explained in plain English

Analysis updated 2026-06-24

★ 11,337JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((magnific-popup))
    What it does
      Image lightbox
      Video popups
      Inline HTML modals
    Status
      Deprecated
      Maintenance only
      Security fixes only
    Alternatives
      Native dialog element
      PhotoSwipe library
    Install
      Drop-in dist files
      npm or Bower
      jQuery required

mindmap root((magnific-popup)) What it does Image lightbox Video popups Inline HTML modals Status Deprecated Maintenance only Security fixes only Alternatives Native dialog element PhotoSwipe library Install Drop-in dist files npm or Bower jQuery required

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Add an image lightbox to an existing jQuery website so photos expand into a fullscreen overlay when clicked

USE CASE 2

Display YouTube or Vimeo videos in a popup overlay without navigating away from the page

USE CASE 3

Show inline HTML content like a contact form or terms text in a modal popup on a jQuery site

What is it built with?

JavaScriptjQueryZepto.js

How does it compare?

	dimsemenov/magnific-popup	xiandanin/magnetw	lockfale/osint-framework
Stars	11,337	11,335	11,341
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	moderate	easy
Complexity	1/5	2/5	1/5
Audience	developer	general	researcher

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

Magnific Popup is a JavaScript plugin that adds lightbox and popup functionality to websites. A lightbox is the effect you see when you click an image on a website and it expands into an overlay in the center of the screen, with the rest of the page dimmed behind it. Magnific Popup handles that display pattern for images, videos, inline HTML content, and other elements. It was a popular choice for years because it worked well across different browsers and mobile devices while remaining small in file size. The plugin is built for jQuery and Zepto.js, two JavaScript libraries that were widely used for interactive web features before more modern development approaches became common. It requires including jQuery on a page before Magnific Popup will work. Important context: the README begins with a deprecation notice. The author states that Magnific Popup is no longer under active development and will receive only critical or security bug fixes going forward. For basic popups and modals, the README recommends using the browser's built-in dialog HTML element, which modern browsers support natively. For image galleries, the author built a newer library called PhotoSwipe and recommends that instead. Community extensions exist for several content management systems, including Drupal, Concrete5, Redaxo, and Contao. Prebuilt distribution files are included in the repository's dist folder, so most users can drop the plugin into their project without a build step. It can also be installed via npm or Bower. The code is MIT licensed and was created by a developer named Dmitry Semenov along with community contributors.

Copy-paste prompts

Prompt 1

I have a jQuery website with a photo gallery and want to add Magnific Popup so clicking any image opens it in a lightbox. Show me the HTML markup and jQuery initialization code.

Prompt 2

I want to use Magnific Popup to show a YouTube video in a popup overlay when a user clicks a thumbnail. Give me the minimal HTML and JS setup.

Prompt 3

I'm using Magnific Popup to open a hidden HTML div as an inline modal when a button is clicked. Show me the HTML structure and the jQuery call to trigger it.

Frequently asked questions