dimsemenov/magnific-popup

★ 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

Things people build with this

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

Tech stack

JavaScriptjQueryZepto.js

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

In plain English

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.

Open on GitHub → Explain another repo

← dimsemenov on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.