magnify popup banner
2021 05 Jan

Implementing Magnific Popup

You might want to add the functionality for a magnific popup where there are multiple items, say images, videos which on clicking would open up in a popup and you would be able to scroll through those. Something like this: https://dimsemenov.com/plugins/magnific-popup/.

Worry not! You do not need to go through the entire documentation in the above link. I have done the hard work for you so that you can get it done in the wink of an eye!

Initialization and modification in custom JS

  • First you need to include the JS library in your theme.
  • The minified file is quite big, so I am not providing it here.
  • You can find the minified JS file here: https://github.com/dimsemenov/Magnific-Popup/blob/master/dist/jquery.magnific-popup.min.js.
  • Place this JS file in the theme you wish to use.
  • Next in the template.php file for your corresponding theme, you need to add the above JS file for the particular content type. You can do something like this below:
if ($vars['node']->type == 'article'') {
        drupal_add_js(drupal_get_path('theme','my_theme') . '/js/jquery.magnific-popup.min.js');
}
  • Once done, you need to write the custom js, where you want this magnific popup to be triggered.
  • The custom JS should look something similar to this:
// Gallery section magnific popup
      if($('.gallery-section .tab-content').length) {
        // magnificPopup for tab 1
        if($('.gallery-section .tab-content .tab1).length) {
          $('.gallery-section .tab1).magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
              enabled: true
            }
          });
        }
}

Somethings to note:

  • I had a tabbed gallery section. Each of the tabs contained a video as the first element and then the rest were images.
  • Here first I check if the gallery section exists. If so, then I again check if the particular gallery tab exists. If so, then for that particular gallery tab I implement the magnific popup.
  • Where “delegate: a” means that I am imposing the functionality on the “a” tag.
  • I have specified the type as an image. You might have the question then how would it work for the video right? I will definitely tell you that in the later section.
  • Finally, we initialize the gallery as true, for it to work.

Implement the custom Html

  • Implement the custom HTML as you like, a gallery tabbed section in my case.
  • Let us see an example of the html I have used:
<div class="tab1 tab-pane fade active in" id="tab1-id">
<div class="col-sm-6 gallery-col">
<div class="gallery-box"><a class="youtube-button venobox vbox-item mfp-iframe" data-autoplay="true" data-gall="myGallery" data-vbtype="video" rel="nofollow" href="https://www.youtube.com/watch?v=something target="_blank"><img alt="tab video" class="img-responsive" src="/sites/default/files/video-thumbnail.jpg" typeof="Image" width="541" height="359"></a></div>
</div>

<div class="col-sm-6 gallery-col">
<div class="row">
<div class="col-sm-6 right-img-wrapper">
<div class="gallery-box"><a href="/sites/default/files/tab-img1.jpg"><img alt="" src="/sites/default/files/tab-img1.jpg"></a></div>
</div>

<div class="col-sm-6 right-img-wrapper">
<div class="gallery-box"><a href="/sites/default/files/tab-img2.jpg"><img alt="" src="/sites/default/files/tab-img2.jpg"></a></div>
</div>

<div class="col-sm-6 right-img-wrapper">
<div class="gallery-box"><a href="/sites/default/files/tab-img3.jpg"><img alt="" src="/sites/default/files/tab-img3.jpg"></a></div>
</div>
<div class="col-sm-6 right-img-wrapper">
<div class="gallery-box"><a rel="nofollow" href="/sites/default/files/tab-img4.png"><img alt="" src="/sites/default/files/tab-img4.png"></a></div>
</div>
</div>
</div>
</div>
  • Now comes the fun part! All of the above are images, except for the first one which is a video. For that to work properly, you simply need to add the following class “mfp-iframe” in the class for the respective video “a” tag.
  • Here I have 1 video and 4 images. That is a total of 5 elements. So when you cycle through these, below you will be able to see that the total count is shown as 5.
  • For sections where you may have multiple tabs, you need to repeat the js
$('.gallery-section .tab1).magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
              enabled: true
            }
          });

For each of the tabs with their corresponding ids respectively. Else it will take the total count of all the elements “for that particular section” and “not that particular tab” and cycle through, say, 100 elements (the total number of elements that you may have in the entire section) instead of the 5 elements in that particular tab.

I am not providing the CSS as that is subjective to how your section looks. Enjoy!

Latest Blogs

ways to increase mobile app engagement

8 Ways to Increase Mobile App Engagement & Retain Users

As the behaviour of the audience continues to change, businesses need to ensure they tweak their strategies to address this.

Read More

Importance of Responsive Web Design for Business Growth

What is the Importance of Responsive Web Design for Business Growth

The key to the success of your business arrives when your website meets the requirements of the customers.

Read More

latest ios app development trends

Top 10 iOS App Development Trends That Will Lead Way in 2022

The use of Apple devices has been increasing, which requires developers to consider mobile app development on iOS too.

Read More

Why Choose PHP for Web Application Development

Why Choose PHP for Web Application Development

PHP has been a popular language to script various websites that have helped companies enhance their conversions.

Read More