Блог

у меня динамически отображается увеличительное всплывающее окно, но изображение отображается после события загрузки, поэтому я не могу получить значение изображения в событии открытия. есть ли какое-либо событие onload во всплывающем окне magnific?

  function OpenPopup(el) {
            var temp = el.innerHTML;
            var mysrc = $(temp).attr("src");
            var isobj = $.magnificPopup.open({
                items: {
                    src: mysrc,
                    onload: 'myevent()',
                },
                type: 'iframe',
                closeOnBgClick: false,
                markup: '<div class="mfp-iframe-scaler">'  
                 '<div class="mfp-close"></div>'  
                 '<iframe class="mfp-iframe" frameborder="0" onload="myevent()"></iframe>'  
                 '<div class="mfp-bottom-bar">'  
                   '<div class="mfp-title"></div>'  
                 '</div>'  
               '</div>',
                callbacks: {
                    beforeOpen: function () {
                        console.log('Start of popup initialization');
                    },
                    elementParse: function (item) {
                        // Function will fire for each target element
                        // "item.el" is a target DOM element (if present)
                        // "item.src" is a source that you may modify
                        debugger;
                        console.log('Parsing content. Item object that is being parsed:', item);
                    },
                    change: function () {
                        console.log('Content changed');
                        console.log(this.content); // Direct reference to your popup element
                    },
                    resize: function () {
                        console.log('Popup resized');
                        // resize event triggers only when height is changed or layout forced
                    },
                    open: function () {
                        console.log('Popup is opened');
                        debugger;
                        var iframe = $.magnificPopup.instance,
          t = $(iframe.currItem.el[0]);
                        var contents = iframe.contents();
                        $(contents).css('max-width', '100%');
                        $(contents).css('max-height', '100%');
                    }
                }
            });
  

Неправильное решение, я добавил временное событие, которое изменяет размер изображения после его загрузки. Пришлось много играть, чтобы получить идеальное время, чтобы не было сбоев. Вот код:

 function OpenPopup(el) {
            var temp = el.innerHTML;
            var mysrc = $(temp).attr("src");
            var isobj = $.magnificPopup.open({
                items: {
                    src: mysrc,
                },
                delegate: 'a',
                type: 'iframe',
                closeOnBgClick: false,
            });
            setTimeout(setImage, 500);
        };
function setImage() {
            var iframe = $('.mfp-iframe');
            var contents = iframe.contents();
            $(contents).find('img').attr('width', '100%');
            $(contents).find('img').attr('height', '100%');
        }