Magnific Popup is a fast, light, mobile-friendly and responsive lightbox and modal dialog jQuery plugin. It can be used to open inline HTML, ajax loaded content, image, form, iframe (YouTube video, Vimeo, Google Maps), and photo gallery. It has added animation effects using CSS3 transitions.
Installation Process: There are several ways to start using this plugin:
- Download the zipped folder of the latest version of Magnific Popup from here.
- Alternatively, clone the Github Repository to any desired location by executing the following command in the Git Bash.
git clone https://github.com/dimsemenov/Magnific-Popup.git
- Since the Magnific is a plugin of the jQuery framework, it needs to reference the jQuery library. This can be done by using the Google-hosted version of jQuery or downloading and using the distribution files.
- Include CSS: Add the magnific-popup.css file from the dist folder of Magnific.
Example 1: This example shows a popup using the plugin.
- Before clicking the button:
- After clicking the button:
Example 2: This example shows a popup with an image using the plugin. The gallery module allows us to switch the content of the popup and adds navigation arrows.
Before clicking on an image:
After clicking on any image:
Reference: Magnific Popup Documentation
- How to use jQuery touch events plugin for mobiles ?
- jQuery | Page Piling Plugin
- jQuery | Mask Plugin
- How to create a jQuery plugin with methods?
- jQuery | Multiscroll Plugin
- jQuery | DrawSVG Plugin
- jQuery | Product Tour Plugin
- jQuery | Alertify Plugin
- jQuery | Flickerplate Plugin
- jQuery | menu-aim plugin
- jQuery | Tagsort Plugin
- jQuery | RowGrid Plugin
- jQuery | Filer Plugin
- jQuery | Logos Distort Plugin
- jQuery | Flipping Gallery Plugin
- jQuery | Vertical Dot Navigation Plugin
- jQuery | table2excel Plugin
- jQuery | CLNDR Plugin
- How to check if a jQuery plugin is loaded?
- jQuery Highcharts Plugin
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.