How to add MagnificPopup to a view of your web in Drupal

Popups are an excellent and sometimes beautiful idea to show the user some secondary or related content without overdoing the website. There are many methods and plug-ins that allow you to get this effect, the all have their pros and cons that make them better or worse in relation to what we need to make of them. However, in this article we’re going to show you one of the best, or at least the most versatile: Magnific Popup, a plug-in that allows to be used in multiple situations: galleries, modal windows, forms, content via AJAX, etc, whine being fast, light (it has a tool for generating a customized view), responsive and easily modifiable by CSS. What else can we ask for?

A simple example on how to incorporate a plug-in in Drupal and really taking advantage of it is using it inside of a view, for this example we’re assuming we have a consistent content view in a list of nodes with the content type “product”. The view will have the name “products” with a block-type display showing the name of the product. If the user clicks on it a popup will open and give them detailed information on the product.

The first step is configuring the view we’re going to use, we’ll initially add two more fields plus the Nid of every product that will be used as a unique identifier for each product’s popup:

   Nid (system name: nid)
   Name of the product (sytem name: title)
   Description of the product (system name: description)

The goal is the “name” field has a link that activates the popup and that from inside the popup the content under the name “description” must come up, for that we’ll try the following:

1. We mark the option “exclude from presentation” from the “nid” field and we deactivate the node to which it’s linked, the goal is to get it out from the node’s id in a plain text format so we can reuse it in the other fields.

2. We mark the option “rewrite the output of this field” in the field “name” we write the following code:

<div class="popup-trigger">
<a href="#popup-[nid]">[title]</a>
</div>

3. We mark the "Write output this field" in the field "Description" and enter the following code:

<div id="popup-[nid]" class="inline-popup mfp-hide">
[descripcion]
</div>

With this we have finished our view, of course this HTML can be changed to customize it for one’s needs, so we have to consider that there must be a link pointing to the pop-up’s id and the div has got to have already the defined classes for the use of the plug-in. In this example these are “inline-popupmfp-hide” but they can vary depending on the options we want to use, all valid options are available in the documentation.

The second step for the popup to work is getting the plug-in’s javascript file to work and the pop-ups to initialize in our view; there are several ways for  incorporating the js code to a Drupal website, in this example we’re going to use a preprocessing function in order to only change the code when the view to which we have added it is showing, we’ll add that function to the template.php file of the theme:

/**
 * Añadir Magnific Popup a bloque de view.
 */
function THEME-NAME_preprocess_views_view(&$vars) {
  $view = &$vars['view'];
  if ($view->name == 'productos' && $view->current_display == 'block') {
    // add needed javascript
    drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/jquery.magnific-popup.min.js');
    drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/inicio-popup.js');
    // add needed stylesheet
    drupal_add_css(drupal_get_path('theme', 'THEME-NAME ') . '/magnific-popup.css');
  }
}

The files .magnific-popup.min.js and magnific-popup.css belong to the plug-in’s code, the file “inicio-popup.js” is one that we’ll create as we need it, the code for this example would be:

(function($) {
  Drupal.behaviors.inicioPopup = {
    attach : function(context, settings) {
      $(".view-productos .title > a").magnificPopup({
        type:"inline",
        removalDelay: 300,
        mainClass: "mfp-fade",
        midClick: true
      });
    }
  };
})(jQuery);

Note: Both in code of the preprocessing function and in this js we’re taking into account that the view we’ve created is called “productos”. 

With this the popup should be completely functional, but it is necessary to add some CSS to the general style sheet of the theme so it has a nice look.

.inline-popup {
  position:relative; 
  width:auto; 
  max-width:650px; 
  margin:20px auto; 

  background-color:#fff;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  padding:30px;  
}

/* Overlay 
   ------------ */
.mfp-fade.mfp-bg { 
  /* at start */
  opacity:0; 
  -webkit-transition:all 0.15s ease-out; 
  -moz-transition:all 0.15s ease-out; 
  transition:all 0.15s ease-out; 
}
.mfp-fade.mfp-bg.mfp-ready { 
  /* animate in */
  opacity:0.8; 
}
.mfp-fade.mfp-bg.mfp-removing { 
  /* animate out */
  opacity:0; 
}  

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

Of course, from here you can change everything you need for it to honor its name and be magnific!

Main photo: Noah Buscher