Drupal: Lightbox overlay with Views 3 and Magnific Popup

This tutorial will take you through the steps of having your Drupal 7 content open up inside a lightbox overlay when it is selected from a view. We'll also throw in a permalink for convenience and SEO.

You should already have a basic working knowledge of Drupal theming and Views 3. 

Get ready

Required modules and plugins:

  1. Enable modules.

  2. Configure jQuery Update to version >= 1.7 (admin/config/development/jquery_update).

  3. Add the two Magnific Popup files to your theme folder: jquery.magnific-popup.min.js and magnific-popup.css.

  4. If you haven't done so already, create a content type for your slides and populate a few nodes so you have something to work with.

Create your view

  1. Create a new view of type "Content", enable block display, and proceed to edit it.

  2. Set up your filters; for instance node type, whether it is published, etc. 

  3. Add the fields below. Uncheck Create a label on all. 

    • Content: Nid. Check Exclude from display.

    • Content: Title. Check Exclude from display. Uncheck Link this field to the original piece of content.

    • Content: Link. Check Exclude from display. Under Text to display, enter "Permalink."

    • Content: Rendered Content.  Check Exclude from display.  Under Display, select "Show complete entity". View Mode is "Full content".

    • Global: Custom text. Add this mark-up:

      <div class="title">
        <a href="#nid-[nid]">[title]</a>
      </div>
    • Global: Custom text. Add this mark-up:

      <div id="nid-[nid]" class="inline-popup mfp-hide">
        <div class="permalink">[view_node]</div>
        [rendered_entity]
      </div>
  4. Save your view.

Modify theme files

Important note: Drupal caches your theme files and settings so if you make any changes to them you will have to clear your caches.

  1. Load plugin stylesheet. Open your theme's .info file and add a new 'stylesheet' key. Be sure to adjust the paths according to where you put your files.

    stylesheets[all][] = css/magnific-popup.css
    
  2. Load plugin script. Now add a 'scripts' key:

    scripts[] = js/jquery.magnific-popup.min.js
    
  3. Call the plugin.   

    jQuery(document).ready(function ($) {
      $(".[VIEW CLASS] .title > a").magnificPopup({
        type:"inline",
        removalDelay: 300,
        mainClass: 'mfp-fade',
        midClick: true
      });
    });

    Above is the inline script we need to call the plugin. Obviously you can customize the parameters however you wish. 

    On a static website you would paste this right into the HTML file between <script></script> tags. But because we want all of our loaded javascript to be processed by Drupal, a recommended method is to place the script inside a preprocessor function. Open template.php and paste in the following code. Replace [THEME NAME] with the name of your theme. Replace "[VIEW CLASS]" with the class of your view element (e.g. "view-news-widget").

    function [THEME NAME]_preprocess_page(&$vars, $hook) {
      drupal_add_js('
    jQuery(document).ready(function ($) {
      $(".[VIEW CLASS] .title > a").magnificPopup({
        type:"inline",
        removalDelay: 300,
        mainClass: "mfp-fade",
        midClick: true
      });
    });
      ', array('type' => 'inline'));
    }
  4. Add styles. Add the following CSS to your global stylesheet and adjust as needed:

    .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; 
    }

Activate your view

Go to admin/structure/block to enable and position your Views block.

That's it. Refresh the page and bask in your (sorta) hard-earned success!