Magnific Popup: Responsive jquery | How to Implement Magnific Popup [ OverView ]

• In this article you will learn:
• 1.Introduction to Magnific Popup.
• 2.Installation.
• 3.Ajax Type.
• 4.Gallery.
• 5.Multiple Galleries.
• 6.Slow loading.
• 7.Conclusion.

Introduction to Magnific Popup:

Magnific Popup is added animation effects using a CSS3 transitions.Integrate Dmitry Semenov’s great Popup jQuery Lightbox plugin with the Drupal as a field formatter.This module provides a fantastic popup field formatters for a file entity and image fields.Fields with the multiple items (cardinality > 1) can be grouped in spectacular popup gallery, or shown individually as stand-alone popup (no “prev”/”next” navigation options) .From the author of a jQuery plugin: Magnific Popup is responsive jQuery lightbox plugin focused on a performance and providing best user experience with the any device (Zepto.js compatible).JQuery plugin supports:

• Single-image lightbox.
• Zoom-gallery.
• Lightbox Gallery.
• Popup with video or map.
• Popup with form.
• Modal popup.
• Ajax Popup.
• Css animations.
• Integration with the other modules.

An Optional Sub-module Magnificent Popup Combining a YouTube with Media: YouTube module allows for simple embedding of a YouTube Pop-ups:

• Dependency
• 7.x Branch
• Libraries
• File unit
• JQuery Update
• 8.x branch
• None

Installation:

• Install a required dependencies (Library, File Entity, jQuery Update, as listed above).
• Configure a jQuery Update.

If using an older version of a jQuery Update, selecting jQuery 1.7 is insufficient: either use newer version of a jQuery Update or 1.7.2+ Apply or use patch to provide a 1.8 or higher jQuery branch. Note that selecting a jQuery 1.8+ may break some of JS (especially the admin overlay), Breaks Core JavaScript (patch provided) Or for an adventurous jQuery fairly stable in a contribution and most compatibility issues can be mitigated by using a jQuery migrate library.

Ajax Type:

• To create this type of a popup, first explain the path to the file want to display and select a Ajax type of the popup.
• The popup should be styled exactly like an inline popup type.

Gallery:

• The Gallery module allows to switch a content of popup and add navigation arrows.
• It can switch and mix the any type of content not just images.

Multiple Galleries:

• To have the multiple galleries on one page, need to create new instance of Fantastic Popup for every different gallery.
• Don’t need to use a delegate option, it can just be a $(this). find(‘a’). magnificPopup ( ….

Slow loading:

• The lazy-loading option preloads a nearby objects. It accepts array with the two integers.
• The first is a number of items to preload before the current one.
• The second is a number of images to preload after current one.
• For example preload: [1,3] 3 will load next item and 1 which is before a current one.
• These values ​​are an automatically switched based on a direction of motion.
• All it does by a default is just search for the image tag and preload it with a JavaScript.
• But can extend it and do the custom preloading logic with help of a lazy load event like this.
• Please use an animation wisely and when it is really needed. Don’t enable it when popup contains a large image or a lot of a HTML text.

Conclusion:

Magnificent popups are the variation of an usual way of displaying images or text in the modal window.The effect is commonly called “Lightbox” named after one of a native JavaScript libraries.There are more different JavaScript libraries that can use to achieve this same effect. Magnificent allows use of a multiple content types in its modals: images, inline (HTML), iframes, and AJAX. For purposes probably only interested in an images and maybe inline types.The primary advantage of aMagnific is that its methods are be responsive.So, the pop ups will adjust to size of a browser window.Magnific Pop Up is the lightweight jQuery that allows us to create a gallery pages with a great convenience.The only thing need is the css and js files that the grand popup needs and a few lines of extra js script in a page itself to add the desired content to its js class.