How to Use Magnific

Magnific Popup is a variation of a common way of displaying images or text in a modal window. The effect is usually called a "lightbox", named after one of the original JavaScript libraries that used it. There are many different JavaScript libraries you can use to achieve this same effect. Magnific allows for the use of several content types in its modals: images, inline (html), iframe, and AJAX. For our purposes, you're probably only interested in images and maybe inline types.

A primary benefit of Magnific is that its modals are responsive. So, the popups will adjust to the size of the browser window.

Download the JavaScript Files

Add jQuery

Magnific is a plugin for the JavaScript framework jQuery and needs to reference jQuery.

Include a Google hosted version of jQuery by using the following HTML in our page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This link includes the jQuery library on our page. Keep in mind, that this link is version specific. The URL we used above included version 3.3.1 of jQuery, which is the current version as of November 2018 (of the version 3 branch).

Get Magnific

Screen shot of the website file structure

The next step is to download the Magnific files. The Magnific project is hosted on GitHub.

Click the Releases button in the center of the page. Then download the zip version of the source code for the latest versions. Find the file you downloaded and unzip it.

The resulting folder should be called Magnific-Popup-master. This folder contains all the source files for the project. We're only interested in the final files, which are typically called the "distribution" files. They are in the folder named dist.

Once you've done this, your website structure should look something like this:

Screen shot of the website file structure

Including the JavaScript in Your Page

Next we need to link the Javascript file into our HTML page that we want to use Magnific on. We need links to both jQuery and the Magnific js file.

The two script tags should go just before the closing body tag of the document. The Magnific JavaScript needs to reference the jQuery framework, so you must include the jQuery file first or else it will not work.

Also note that your file names might be slightly different.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Magnific Example</title>
  </head>

  <body>
    <!-- All of your content -->
	 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
</body>
</html>

The Magnific CSS

Magnific requires it's own CSS code in order to display things properly. Simply add the magnific-popup.css to your page like a normal CSS document. You should include it after your reset/normalize, but before your own styles.

Include the Magnific CSS File

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <title>Magnific Example</title>

  <link rel="stylesheet" href="css/reset.css" media="screen" />
  <link rel="stylesheet" href="css/magnific-popup.css" media="screen" />
  <link rel="stylesheet" href="css/master.css" media="screen" />
</head>

Prepping Your Images

The goal here is to show a thumbnail image, or group of thumbnails, and then have them link to the full size image.

In order for this to work, you must have all of your full size images ready in web format. You should then decide on a thumbnail size and prepare a thumbnail for each of your images.

You should save all of the images in your images folder.

Writing the HTML for Image Lightboxes

The neat part about this kind of thing is that we don't have to do very much to our HTML in order for Magnific to work.

You can use whatever tags suit the context of your HTML. All that really matters, is that you have a thumbnail image, wrapped with a link to the full file.

<a href="images/full-size.png">
  <img src="images/thumbnail.png" alt="remember your alt tag" />
</a>

Single Images

Add a "trigger" class

Your images must have a class to use as a "trigger". It can be named whatever you want. I'm using "fluffychicken" for this example.

<a href="images/full-size.png" class="fluffychicken">
  <img src="images/thumbnail.png" alt="remember your alt tag" />
</a>

Initialize Magnific Popup

You have to initialize your popup after you've loaded the JavaScript files in order for Magnific to work. Below is the most basic initialization code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Magnific Example</title>
  </head>

  <body>
    <!-- All of your content -->
	 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script>
       $(document).ready(function() {
          $('.fluffychicken').magnificPopup({ 
             type: 'image'
             // other options here
             // end each line (except the last) with a comma
          });
       });
    </script>
</body>
</html>

The text inside the parenthesis, after the $ should match the class you used on your links. Here it is $('.fluffychicken') because we used a class of 'fluffychicken'. If our class was 'magazine-photo', we would change the code to $('.magazine-photo').

Image Groups (Gallery)

Add a common "trigger" class

If you want to use Magnific with a group of pictures to create a gallery of photos you can click through, you need to include a common class name for each item of the group.

Here's an example of a photo gallery of cats:

<a href="images/cat1.png" class="lightbox-cats" >
  <img src="images/cat1-thumbnail.png" alt="First Cat" />
</a>
<a href="images/cat2.png" class="lightbox-cats" >
  <img src="images/cat2-thumbnail.png" alt="Second Cat" />
</a>
<a href="images/cat3.png" class="lightbox-cats" >
  <img src="images/cat3-thumbnail.png" alt="Third Cat" />
</a>

Initialize Magnific Popup Gallery

For groups of images, you should enable the gallery feature. This allows you to cycle through images within the popup, gives you navigation arrows, and a photo counter in the bottom right.

The gallery feature is enabled by adding it as an option to the initialization code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Magnific Example</title>
  </head>

  <body>
    <!-- All of your content -->
	 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script>
       $(document).ready(function() {
          $('.lightbox-cats').magnificPopup({ 
             type: 'image',
             gallery:{enabled:true}
             // other options
          });
       });
    </script>
</body>
</html>

Including a Caption With Your Images

With Magnific you can also include a caption to be displayed in the modal.

This is done by adding the caption to the anchor tag as a title attribute. So, the value of your title attribute is the caption of the image in the modal.

<a href="images/full-size.png" title="This Is My Image Caption" class="lightbox">
  <img src="images/thumbnail.png" alt="remember your alt tag" />
</a>

Adding Animation Effects

Magnific does not use animation by default, but you can easily enable it. If you're crafty with your CSS, you can even modify the animation behavior. To enable the basic animation, add the following to your page.

Add the animation CSS

The Magnific documentation provides the following basic CSS for adding animation. Add this to your normal stylesheet.
/* Animation effects for Magnific */
/* overlay at start */
.mfp-fade.mfp-bg {
    opacity: 0;
    
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
   opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
   opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
   opacity: 0;

   -webkit-transition: all 0.15s ease-out;
   -moz-transition: all 0.15s ease-out;
   transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
   opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
   opacity: 0;
}

You may modify this CSS in order to adjust the animation.

Add the options to the initialization code

You have to add two options for your animation to take effect. The first option adds a delay, which allows time for the animation to happen. The second adds a class for the animation CSS to hook to.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Magnific Example</title>
  </head>

  <body>
    <!-- All of your content -->
	 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script>
       $(document).ready(function() {
          $('.lightbox-cats').magnificPopup({ 
             type: 'image',
             gallery:{enabled:true},
             removalDelay: 300,       // Delay in milliseconds before popup is removed
             mainClass: 'mfp-fade'   // Class that is added to popup wrapper and background
          });
       });
    <script>
  </body>
</html>

That's It!

That's all you need for your basic Magnific implementation. Make sure to study the Magnific Demo I've provided so that you understand how to use it.

For the more adventurous folk, the Magnific website and documentation contains all sorts of extra features that you can use tweak things.