CODEWITHSUNDEEP
javascriptjquerymagnific-popup
tjcss
tjcss

Reputation: 860

magnificpopup only working on second click when calling inline ajax

I am trying to call a local web page to load up inside the magnificpopup overlay, but it only does so on the second click.

In my network tab I can see that it's requesting that page, but it wont fire the overlay and load in that html until the second click.

I'm a junior at JS, so I'mnot really sure what I need to do so any pointers will be appreciated!

Component.prototype = {

    init: function () {
        var that = this;

        this.$element.on('click tap',function(e){
            e.preventDefault();
            that._galleryId = that.$element.attr('href'); //get the url from the link we've just clicked
            that._initialiseGallery(that);

        });

    },
    _onGalleryOpen: function(that){
        console.log('test5');
        if(that.options.fullScreenType === 'image'){
            $(window).trigger('resize');
        }
    },

    _initialiseGallery: function(that) {

        that.$element.magnificPopup({
          items: {
            src: that._galleryId
          },
          type: 'ajax',

            callbacks: {
                open: function() {
                    that._onGalleryOpen(that);
                },
                close: function() {
                  // Will fire when popup is closed
                },
              parseAjax: function(mfpResponse) {
                // mfpResponse.data is a "data" object from ajax "success" callback
                // for simple HTML file, it will be just String
                // You may modify it to change contents of the popup
                // For example, to show just #some-element:
                mfpResponse.data = $(mfpResponse.data).find('.Gallery');

              },
              ajaxContentAdded: function() {
                // Ajax content is loaded and appended to DOM
              }
            }
        });
    }
}

Upvotes: 1

Views: 1428

Answers (1)

tjcss
tjcss

Reputation: 860

So changing:

that.$element.magnificPopup({

to:

$.magnificPopup.open({...});

worked!

I found the solution here: Magnific-popup fails to open from button inside Google Maps infoBox

Upvotes: 3

Related Questions