How to get Magnific Popup extension work
Do you want your site users to see a great pop-up effect when they visit your site? We are more than happy to present one of our new Website templates hacks. This time we’ll be dealing with the Magnific Popup extension to implement the modal windows functionality.
So, let’s review the benefits of the inserting modal window to a page. There are several options that allow to use different types of the modal windows for a quick initialization.
Please, note, that in order to gain Magnific Popup extension effect, we will need to work with the data-lightbox attribute.
[notice type=”warning”]Note: adding the data-lightbox attribute to any of the page links or buttons will automatically convert it into the modal window.
Option #1. You would like to insert the modal window with a separate image
Not a problem if you use data-lightbox=”image” attribute at the target link code. Please see the example code below:
Option #1 (a). Adding captions to images is required
Surely, you may prefer to see the caption for the images in the modal window. We can easily add corresponding image caption in the modal window by specifying an optional title attribute to target item with data-lightbox data attribute. But one exact example is worth a thousand words to read. So, for your convenience we are showing the complete code with the separate image in the modal window that has the corresponding caption:
Option #2. You would rather insert the modal window with iframe
It’s not so far difficult when implementing data-lightbox="iframe" attribute at the target link code. The samples of the correct code are below:
Option#3. Let’s consider you are about to create a modal gallery
You should use data-lightbox=”gallery” attribute for a parent item of the target child modal items group and here you are. That’s the modal gallery you’ve asked for. The code below is for instance:
Now select one of the options, implement the corresponding code and when you save the changes and refresh your page that should be it. We hope this article helped you to learn how to get the Magnific Popup extension work.
Your attention is highly appreciated! Stay tuned for our pieces of advice to suit your preferences in the process of the theme customization.
