Magnific-Popup

Folder: app/addons/Magnific-Popup

This plugin is used for images and embedded HTML popup:

Also, the popup gallery is configured or disabled from the enablePopupGallery function which is found inside the script.js file also.

This is how the “enablePopupGallery” function looks like:

For images:#

enablePopupGallery: function() {
 $('.ag-gridGallery-jstrigger').each(function() {
 $(this).magnificPopup({
 delegate: 'a',
 type: 'image',
 gallery: {
 enabled:true
 }
 });
 });
 },

Each gallery is defined by the ‘.ag-gridGallery-jstrigger' class which contains a link with a “href” attribute. This attribute represents the path to the image that will be opened in the gallery when the user clicks on the gallery item.

For iframe:#

cacheDom: function(){
this.videoBox = $('.ag__playVideo');
},
bindEvents: function(){
var self = this;
self.videoBox.magnificPopup({type:'iframe'});
}

The iframe is triggered on the following html markup from studio.html

<a class="media-container-title txt-center media-container__link ag__playVideo" href="#" data-lightbox="iframe">

In the header of the page, the css of the plugin is loaded

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="addons/Magnific-Popup/magnific-popup.css">

At the bottom of the page, the script is loaded

<script src="addons/Magnific-Popup/jquery.magnific-popup.js"></script>

Counter element

Folder: app/addons/

This plugin is used for the animated counter element:

The plugin is loaded at the bottom of index.html

<!--count script-->
<script src="addons/jquery.countTo.js"></script>

The code from script.js :

initCounterElement: function() {
 var counterElement = $('.counter_trigger'),
 itemIsReached;

counterElement.each(function(){
 var $el = $(this);
$(window).scroll(function(){
 itemIsReached = ag.isScrolledIntoView($el);
if (itemIsReached) {
if( $el.hasClass( 'cg__didAnimation' ) ){
 return true;
 }
$el.addClass( 'cg__didAnimation' );
$el.data('countToOptions', {
 formatter: function (value, options) {
 return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
 }
 });
var options = $.extend({}, options || {}, $el.data('countToOptions') || {});
 $el.countTo(options);
}
 }).trigger('scroll');
 });
 },

The markup that triggers the js is

<div class="counter_trigger counter_element" data-to="248" data-speed="1000" data-refresh-interval="1"></div>