Updated on September 19, 2018

My go-to plugin for lightboxes and popups is usually ARI Fancy Lightbox.

But there could be times when you want more control like wanting to show some content when a button in the homepage hero section is clicked in a popup. Having the plugin load its assets on all the pages throughout the site will then be an overkill.

Magnific Popup is a jQuery script for showing content (single image/gallery, iframe, inline content, other pages in the same site etc.) in a popup.

In this members-only tutorial, I am going to share a few different ways in which Magnific Popup can be used in Oxygen.

The following implementations are covered:

Displaying

  • page content in a popup
  • a single image in a popup
  • a single image in a popup with zoom-out animation
  • a YouTube or Vimeo video in a popup
  • a single image with controls to see more (gallery) in a popup
  • inline content in a popup. Ex. Ninja Forms form

Live Demo

Displaying page content in a popup

Let's say you have a LEARN MORE button in a hero section on your site's front page.

And you would like to display the content of a Page that you visually designed in Oxygen when that button is clicked.

Here's how this can be setup:

Step 1

Let's load Magnific on the front page.

Install and activate my custom functionality plugin.

Upload magnific-popup.css to plugin's assets/css directory.

Upload jquery.magnific-popup.min.js to plugin's assets/js directory.

Note: Instead of the above full js file, you may want to use the build tool on Magnific Popup's site to select only the kind of content you want to show in the popup and get smaller js file.

In this example, it would be Ajax.

Step 2

Edit plugin.php and replace the code inside sk_enqueue_files() with

This is a premium members-only content.

To view the rest of the content, please sign up for membership (one-time payment for lifetime access).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Any idea why I would be seeing the following errors? This only happens when the popup is triggered. Thanks!

    jquery.js?ver=1.12.4:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.
    send @ jquery.js?ver=1.12.4:4
    ajax @ jquery.js?ver=1.12.4:4
    n._evalUrl @ jquery.js?ver=1.12.4:4
    Ha @ jquery.js?ver=1.12.4:3
    append @ jquery.js?ver=1.12.4:3
    appendContent @ magnific-popup.js:558
    success @ magnific-popup.js:1011
    i @ jquery.js?ver=1.12.4:2
    fireWith @ jquery.js?ver=1.12.4:2
    y @ jquery.js?ver=1.12.4:4
    c @ jquery.js?ver=1.12.4:4
    XMLHttpRequest.send (async)
    send @ jquery.js?ver=1.12.4:4
    ajax @ jquery.js?ver=1.12.4:4
    getAjax @ magnific-popup.js:1034
    updateItemHTML @ magnific-popup.js:520
    open @ magnific-popup.js:348
    _openClick @ magnific-popup.js:668
    eHandler @ magnific-popup.js:610
    dispatch @ jquery.js?ver=1.12.4:3
    r.handle @ jquery.js?ver=1.12.4:3
    VM49:2 JQMIGRATE: Migrate is installed, version 1.4.1
    VM51:1 Uncaught SyntaxError: Invalid or unexpected token
    at eval ()
    at jquery.js?ver=1.12.4:2
    at Function.globalEval (jquery.js?ver=1.12.4:2)
    at Ha (jquery.js?ver=1.12.4:3)
    at a.fn.init.append (jquery.js?ver=1.12.4:3)
    at MagnificPopup.appendContent (magnific-popup.js:558)
    at Object.success (magnific-popup.js:1011)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at y (jquery.js?ver=1.12.4:4)
    (anonymous) @ jquery.js?ver=1.12.4:2
    globalEval @ jquery.js?ver=1.12.4:2
    Ha @ jquery.js?ver=1.12.4:3
    append @ jquery.js?ver=1.12.4:3
    appendContent @ magnific-popup.js:558
    success @ magnific-popup.js:1011
    i @ jquery.js?ver=1.12.4:2
    fireWith @ jquery.js?ver=1.12.4:2
    y @ jquery.js?ver=1.12.4:4
    c @ jquery.js?ver=1.12.4:4
    XMLHttpRequest.send (async)
    send @ jquery.js?ver=1.12.4:4
    ajax @ jquery.js?ver=1.12.4:4
    getAjax @ magnific-popup.js:1034
    updateItemHTML @ magnific-popup.js:520
    open @ magnific-popup.js:348
    _openClick @ magnific-popup.js:668
    eHandler @ magnific-popup.js:610
    dispatch @ jquery.js?ver=1.12.4:3
    r.handle @ jquery.js?ver=1.12.4:3

  • excuseme, but if I edited code of the plugin.php for other thing.. (tutorial FAQs).. it’s posible edit too.. I lost here.

    • Are you referring to Step 2?

      If you have some other code in your custom functionality plugin’s sk_enqueue_files(), you would need to add the code in this tutorial inside the function and leave the already existing code as is.

    • Any such errors in the Oxygen editor can safely be ignored as long as they are also not appearing on the front end.

      Can you provide the URL of the page where you are trying this and can’t get it to work?

  • Sridhar,

    I am trying to get this code to work for an inline form popup using gravity forms. I have followed your instructions and the pop up works in the back end in the Oxygen editor but not on the front end. When I click on the button, it just takes me to the URL of the home page with the shortcode appended to it.

    Any suggestions would be appreciated.

    Kind regards,

    Ian

    The site is behind a maintenance page so it will be tricky to show you the page.

      • Ian wrote the following via email. Could be helpful to others..

        I have managed to solve my issue with the pop up. The function wasn’t being processed because it was being loaded in the footer. When I changed the ‘true’ to a ‘false’ in the code to enqueue the scripts in pluin.php the script was loaded in the header and then the pop up worked.

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: