Script loader

loadscript.js

function loadScript(url, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

// MAGNIFIC POPUP SETTINGS
// ============================================================
var runPopup = function () {
    $('.thumbnails').magnificPopup({
        delegate: 'a',

        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: true,
        showCloseBtn: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile mfp-ux-navi',
        image: {
            verticalFit: true
        },
        zoom: {
            enabled: true,
            duration: 300, // don't forget to change the duration also in CSS
            opener: function (element) {
                return element.find('img');
            }
        },
        gallery: {
            enabled: true,
            navigateByImgClick: false
        },
        callbacks: {
            buildControls: function () {
                console.log(this);

                // re-appends controls inside the main container
                if (this.arrowLeft) {
                    this.arrowLeft.appendTo(this.contentContainer);
                    this.arrowRight.appendTo(this.contentContainer);
                }
            }
        }
    });
};

// USE CASE
$(document).ready(function () {
    loadScript("/themes/javascripts/vendors/magnific-popup/jquery.magnific-popup.min.js", runPopup);
});