Изменение размера изображения при отображении страницы внутри диалогового окна jQuery и iFrame - PullRequest
2 голосов
/ 01 февраля 2011

У меня странные проблемы с отображением при использовании диалогового окна jQuery с iframe в Firefox и IE8.

Я проверил саму страницу за пределами iframe, и проблемы не воспроизводятся, только внутри диалога jQuery.

Issue

enter image description here

фактический размер изображения: 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 по некоторым причинам оно увеличивает изображение.

Ответы [ 2 ]

0 голосов
/ 01 февраля 2011

В итоге я удалил следующее с дочерней страницы:

CSS

.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');
});

Это исправило проблему во всех браузерах. Первоначально у меня были большие изображения, и я пытался динамически изменить их размер с помощью jQuery / CSS. После написания кода на стороне сервера для изменения размера изображений при загрузке мне больше не нужен этот процесс, но я не удалил его из исходного кода.

0 голосов
/ 01 февраля 2011

попробуйте установить ширину стилей изображения на 100%

...