jquery dialog positioning

Question

will someone explain to me why my dialog only centers part of the time? Sometimes the first time the dialog loads the image it's off to the right, but if you click it a second time, it's centered. And sometimes the image will be centered and I refresh the page and it's off center???

I have the following markup...

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

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

You can see this at http://jameswadeweaver.com/portfolio.php

The Photography section at the bottom of the page is where I'm running into centering issues.

Answer 1

This isn't a centering issue. This is a sizing issue. You dialog is created before image loads, so it is using some basic dimension box, which is centered. But then image finishes loading and overflows the dialog container.

I would suggest adding load event handler to the img tag moving your .dialog(...) code there. Something along these lines

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

Alternatively you could preload large images into a hidden div on window load, then you wouldn't have this delay.

Answer 2

liho1eye has covered the source of your problem and provided a reasonable solution but there is another possibility.

If you know the dimensions of the large and small images are then you could change the HTML to look like this:

<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" />

The dimensions are, of course, just made up numbers here. Then you could read the data attributes to properly size the dialog before displaying it:

$('.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({
        //...
    });
    //...
});

Then the image size and thus the dialog size will be know when the dialog is displayed and the dialog can position itself properly.