Magnific popup to load HTML Link contents using iframe

Question

Need Magnific plugin help to solve my issue. Our third party developer developed a script to load as inline content. It works fine.

Now client required to load "html" contents using IFRAME when clicked the link. Not sure how to modify the existing JS file to add iframe type.

JS code:

TEST.overlay.initOverlay();

TEST.overlay = (function () {
    function Overlay() {
        var _this = this;
        this.initOverlay = function(){
            $('.popup-link').on('click', function(){
                var contentHTML = $(this).data('overlay-container');
                _this.open(false, $('.'+contentHTML).html(), $(this), {});
            });
        };


        this.open = function(modal, contentHTML, target, options ) {      
            $.magnificPopup.open({
                tClose: options.closelabel,
                tLoading: options.loadinglabel,
                modal: modal,
                preloader: false,
                midClick: true,
                mainClass: 'mfp-fade',
                removalDelay: 300,
                closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>',
                items: {
                    src: contentHTML,
                    type: 'inline'
                },
                callbacks: {
                    open: function () {
                        target.trigger('overlayOpen');
                    },
                    close: function () {
                        target.trigger('overlayClose');
                    }
                }
            });
        };

        this.close = function() {
            $.magnificPopup.close();
        };

    }
    return new Overlay();
}());

HTML (Existing HTML structure for inline content)

<a href="javascript:;" class="popup-link" data-overlay-container="overlay-content-1">
   <img src="http://lorempixel.com/300/150/food/" alt="">
</a>

HTML: (Needed for IFRAME to load)

Have to call HTML files inside popup like inline container

<a href="test1.html" class="iframe-popup-link">
  <img src="http://lorempixel.com/300/150/food/" alt="">
</a>

Also please let me know how to define HTML structure for IFRAME container.

Thanks in advance

Answer 1

Is there any more JS you can share? preferably all of the code that corresponds to test.popup

This code isn't tested but try changing the code inside this.open function to:

    $.magnificPopup.open({
                    tClose: options.closelabel,
                    tLoading: options.loadinglabel,
                    modal: modal,
                    type: 'iframe',
                    preloader: false,
                    midClick: true,
                    mainClass: 'mfp-fade',
                    removalDelay: 300,
                    closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>',
                    iframe: {
                      markup: '<div class="mfp-iframe-scaler">'+
                    '<div class="mfp-close"></div>'+
                    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                  '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
              srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
          },
                callbacks: {
                    open: function () {
                        log('popup open');
                        target.trigger('popupOpen');
                    },
                    close: function () {
                        log('popup close');
                        target.trigger('popupClose');

                        if ($(target).parent().hasClass('slides-item') && $(target).parent().parent().find('.slides-item').length > 1) {
                            TEST.carousel.playCarousel($(target).parent().parent().parent().parent());
                        }
                    }
                }
            });

Then the link to open the iframe would be:

<a href="http://www.linktowebpage.com" class="link-popup">
   <img src="http://lorempixel.com/300/150/food/" alt="Image">
</a>

Here is a fiddle of the code adpated to open a iframe http://jsfiddle.net/p90ysz80/2/