JQuery Позиционирование диалога - PullRequest
Новая
       15

JQuery Позиционирование диалога

1 голос
/ 24 декабря 2011

кто-нибудь объяснит мне, почему мой диалог только по центру?Иногда в первый раз, когда диалоговое окно загружает изображение, оно смещено вправо, но если вы щелкнете его во второй раз, оно будет отцентрировано.И иногда изображение будет по центру, и я обновляю страницу, и она выходит из центра ???

У меня есть следующая разметка ... 

<div class="details">
<img id="photo1" class="photos opacity" src="images/photos/angledBuilding_sm.jpg" alt="photography" />
</div>

и следующие .js ...

$('.photos').click( function() {
var id = this.id;
var src = this.src;
var lrg = "_lg";
var sm = "_sm"
var title = 'This title';//create a separate function to set the title of the image.
var srcNew = src.replace(sm, lrg);
var $dialogImg = '<div><img src=' + srcNew + ' /></div>'
var $dialog = $($dialogImg)

.html($dialogImg)
.dialog({
autoOpen: true,
modal: true,
title: ' ' + title + ' ',
width: 'auto',
height: 'auto',
resizable: false,
draggable: false,
});

$dialog.dialog('open');
$(id).dialog('option', 'position', 'top center');
});

Вы можете увидеть это на http://jameswadeweaver.com/portfolio.php

В разделе «Фотографии» внизу страницы я сталкиваюсь с проблемами центрирования.

Ответы [ 2 ]

2 голосов
/ 24 декабря 2011

Это не центральная проблема.Это проблема с размерами.Ваше диалоговое окно создается до загрузки изображения, поэтому в нем используется базовое поле размеров, которое центрируется.Но затем изображение завершает загрузку и переполняет контейнер диалога.

Я бы предложил добавить обработчик события загрузки к тегу img, перемещая туда код .dialog(...).Что-то вроде этих строк 

$('.photos').click(function()
{
    $("<img/>")
        .on("load", function() { $("<div/>").append(this).dialog(...); })
        .prop("src", $(this).prop("src").replace("_sm", "_lg"));
});

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

0 голосов
/ 24 декабря 2011

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

Если вы знаете размеры больших и маленьких изображений, вы можете изменить HTML-код так: 

<img id="photo1"
    class="photos opacity"
    src="images/photos/angledBuilding_sm.jpg"
    alt="photography"
    width="281"
    height="161"
    data-lg-width="1123"
    data-lg-height="642" />

Размеры, конечно, здесь только что составлены. Затем вы можете прочитать атрибуты данных для правильного определения размера диалогового окна перед его отображением: 

$('.photos').click( function() {
    var $this  = $(this);
    var id     = this.id;
    var src    = this.src;
    var width  = $this.data('lg-width');
    var height = $this.data('lg-height');

    //...

    var $dialog = $('<div>').append(
        $('<img>', {
            src: srcNew,
            width: width,
            height: height
        })
    );
    $dialog.dialog({
        //...
    });
    //...
});

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

...