AJAX подгрузка для слайдера

Хэллоу! Как мне сделать AJAX или что-то, типо AJAX подгрузки слайдов в magnific-popup слайдере. Нужно, чтобы картинка слайдера загружалась только после того, как слайд с ней включился.

                 <div class="mfp-galary-block">
                    <a href="img/main-slider/bg2.png" class="mfp-galary">
                        <img src="img/main-slider/bg2.png" class="sl-img" alt="" width="135" height="105">
                    </a>
                    <a href="img/main-slider/bg3.png" class="mfp-galary">
                        <img src="img/main-slider/bg3.png" class="sl-img" alt="" width="135" height="105">
                    </a>
                    <a href="img/main-slider/bg4.jpg" class="mfp-galary">
                        <img src="img/main-slider/bg4.jpg" class="sl-img" alt="" width="135" height="105">
                    </a>
                    <a href="img/main-slider/bg5.jpg" class="mfp-galary">
                        <img src="img/main-slider/bg5.jpg" class="sl-img" alt="" width="135" height="105">
                    </a>
                </div>

    $(document).ready(function() {
    $('.mfp-galary').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        image: {
            verticalFit: false,
        },
        gallery: {
            enabled : true
        }
    });
});