INTRODUCTION

Integrate Dmitry Semenov's Magnific Popup jQuery lightbox plugin with Drupal as a field formatter.

This module provides a "Magnific Popup" field formatter for File Entity and Image fields. Fields with multiple items (cardinality > 1) can be grouped into a Magnific Popup gallery, or shown individually as a stand-alone popup (no "previous"/"next" navigation options).

From the author of the jQuery plugin:

Magnific Popup is a responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device (Zepto.js compatible).

The jQuery plugin supports:

  • Single-image lightbox
  • Zoom-gallery
  • Lightbox gallery
  • Popup with video or map
  • Popup with form
  • Modal popups
  • Ajax popups
  • CSS animations

INTEGRATION WITH OTHER MODULES

Combining the optional sub-module Magnific Popup YouTube with the Media: YouTube module allows easy embedding of YouTube pop-ups.

DEPENDENCIES

INSTALLATION

7.x branch

  1. Install the required dependencies (Libraries, File Entity, jQuery Update, as listed above).
  2. Configure jQuery Update to provide version 1.7.2 or higher (configured at admin/config/development/jquery_update). IMPORTANT NOTE: TL;DR (short version): Use jQuery Update 7.x-2.6 or later and select the "1.7" or later jQuery branch.
    Long version: jQuery Update provides 1.7.2+ as of 7.x-2.6 (June 17, 2015). If you are using an earlier version of jQuery Update, selecting jQuery "1.7" is insufficient: either use a newer version of jQuery Update or apply a patch to provide 1.7.2+ (#2466329: Update 1.7 to 1.7.2) or use the "1.8" or higher jQuery branch. Note that selecting jQuery 1.8+ may break some JS (notably the Admin Overlay), see #1951588: jQuery 1.8+ Breaks Core JavaScript (patch provided). Or, for the adventurous, jQuery 1.9+ is fairly stable in contrib, and most compatibility issues can be mitigated by using the jQuery Migrate library.
  3. Install the third-party Magnific Popup library as "magnific-popup" under sites/SITE/libraries (where SITE is "all," "default," etc.).
    To be correctly detected and used, the JS and CSS must be located at these paths (where "libraries" is site/SITE/libraries as described above):
    • libraries/magnific-popup/dist/jquery.magnific-popup.js
    • libraries/magnific-popup/dist/magnific-popup.css
  4. Activate the Magnific Popup module, then manage the display of any File or Image fields at admin/structure/types/manage/TYPE/display. Choose "Magnific Popup" as the formatter and optionally configure Gallery Style options on the field. An example "Photo Gallery" Image field:
    Photo Gallery field using Magnific Popup format
  5. By default, item thumbnails will use the "magnific_popup_thumbnail" Image Style. You can configure this image style under Image Styles at admin/config/media/image-styles/edit/magnific_popup_thumbnail.

8.x branch

  1. Install the third-party Magnific Popup library as "magnific-popup" under DRUPAL_ROOT/libraries.
    To be correctly detected and used, the JS and CSS must be located at these paths:
    • libraries/magnific-popup/jquery.magnific-popup.min.js
    • libraries/magnific-popup/magnific-popup.css
  2. Activate the Magnific Popup module, then manage the display of any Image fields or video_embed_field fields. Choose "Magnific Popup" as the formatter and optionally configure Gallery Style options on the field.
AttachmentSize
MFP_Field_Formatter.jpg16.4 KB

Project Information

Downloads