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!