У меня странные проблемы с отображением при использовании диалогового окна jQuery с iframe в Firefox и IE8.
Я проверил саму страницу за пределами iframe, и проблемы не воспроизводятся, только внутри диалога jQuery.
Issue
фактический размер изображения: 300x225 размер изображения: 400x300
Код JS - родительская страница
$(document).ready(function() {
var img = $('.photoLink');
var imgSrc = img.attr('src');
$('.photoLink').photoDialog({
id: imageID,
onClose: function() {
img.attr('src', imgSrc + '&rand=' + (new Date()).getTime());
}
});
});
$.fn.photoDialog = function(options) {
var defaults = {
autoOpen: false,
title: 'Photo Tool',
minHeight: 560,
minWidth: 540
onClose: function(){}
};
var opts = $.extend(defaults, options);
return this.each(function() {
$this = $(this);
that =$(this);
var $dialog = $('<div>')
.html('<iframe src="' + opts.url + '?sn=' + opts.id + '" width="' + (opts.minWidth - 20) + '" height="' + (opts.minHeight - 20) + '" style="border: none;" scrolling="no"></iframe>')
.dialog({
autoOpen: opts.autoOpen,
title: opts.title,
minHeight: opts.minHeight,
minWidth: opts.minWidth,
modal: true,
close: function() {
opts.onClose.call(that);
}
});
$this.click(function() {
$dialog.dialog('open');
return false;
});
});
};
Код тела - Детская страница
<div id="photo_holder" runat="server">
<asp:Image ID="image_photo" style="display: none;" runat="server" />
</div>
Код стиля - Детская страница
#photo_holder {
position: relative;
float: left;
padding: 10px;
width: 300px;
height: 300px;
}
.portrait { height: inherit; width: auto; }
.landscape { height: auto; width: inherit; }
Код JS - детская страница
$(document).ready(function () {
$('#image_photo').load(function () {
$this = $(this);
if ($this.width() > $this.height()) {
$this.attr('class', 'landscape');
}
else {
$this.attr('class', 'portrait');
}
}).fadeIn('slow');
});
Класс изображения задается динамически в зависимости от размеров изображения.
Путь к изображению задается в коде, стилизация и изменение размера не выполняются.
Размер изображений при загрузке изменяется не более 300x300.
Отображение корректно в Chrome и Safari, но в IE и FF по некоторым причинам оно увеличивает изображение.