Magnific Popup

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

• 7.x branch
  • Libraries
  • File Entity
  • jQuery Update (jQuery 1.7.2 or above is required - see notes under Installation, below)
• 8.x branch
  • None

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:
   
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 should be located at these paths:
   • libraries/magnific-popup/dist/jquery.magnific-popup.min.js
   • libraries/magnific-popup/dist/magnific-popup.css

   Paths not using the "dist" folder (for versions before 8.x-1.3) are still supported. Although it is advisable to update the paths to use the "dist" folder.

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.