image in magnific popup in iframe - iframe

Question

i have a magnific popup being displayed dynamically but the image is rendered after the load event so i cannot get the value of the image in the open event. is there any onload event in magnific popup?
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%');
}
}
});

Answer 1

Not a proper solution put i added a timed event which resizes the image once it is loaded. Had to play a lot to get the perfect time so that there is no glitch.
Here is the code:
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%');
}