Javascript Components
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>