google chrome ajax и модальное окно facebox
 

Уважаемые форумчане, помогите решить проблему. Использую плагин facebox для показа картинок. Во всех браузерах все хорошо. Только Хром портит кровь. Смещает фейсбокс в право.
Причину я уже нашел, но как ее победить не могу понять.
Блоку #facebox задается абсолютное позиционирование. top вычисляется от высоты окна, это я понял

$('#facebox').show().css({
        top:	getPageScroll()[1] + (getPageHeight() / 10),
        left:	$(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2)
      })

А вот с left проблема. Вторая часть выражения

($('#facebox .popup').outerWidth() / 2)

в хроме просто не вычисляется. Я так понимаю, потому что вычисление происходит еще до загрузки изображения в фейсбокс.
Только хром страдает такой хренью.
Подскажите как можно побороть это? Как просчитать ширину загружаемого изображения?

до загрузки получить ширину изображения можно только из атрибута width тэга img или из css.

Попробуйте алертнуть outerWidth. Если нормального значения в alert'е не будет, значит добавляйте к картинке некий тег width. Либо .css("width") получать. Если же будет, то проблема в скрипте. Напишите, был алерт или нет (вернее, значение в нем).

Есть оченно большое подозрение что facebox умеет центрироваться самостоятельно. Почитайте доки.

Алерт выводит 0. А передать width нет возможности. У меня в базе записаны названия изображений, а php скрипт формирует разметку, задает путь к файлу и истинного размера изображения не знает.
Можно конечно приделать костыли и на сервер каким то образом узнавать размер изображения. Но это уже будут костыли

Доки изучил. И не только по фейсбоксу. Почти во всех *боксах такая хрень и только в хроме.
Да фейсбокс центует сам. Выше я приводил кусок кода. Но проблема не в нем а в хроме, который выполняет джаваскрипт до загрузки изображения.
Почему то.

Поставьте атрибут onload последней подгружаемой картинке и по этому событию запускайте функцию ?

кстати, а разве можно управлять порядком загрузки картинок?
ведь даже если она идёт последней в коде, это ещё не значит, что она последней загрузится.

А если так, то уж $(window).load()

Вызывайте процесс позиционирования ПОСЛЕ загрузки картинок, например так:

$("img").one('load', function() {
  // ваш код
  $('#facebox').show().css({
        top:    getPageScroll()[1] + (getPageHeight() / 10),
        left:   $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2)
      })
  // конец вашего кода
}).each(function() {
  if(this.complete) $(this).load();
});

Ссылки по теме: 1, 2. Задача, если хотите по-настоящему вникнуть в суть вопроса и есть свободное время.

Конечно же нет. Странная мысль по поводу установки обработчика на последнюю картинку.
$(window).load() не поможет, если картинки загружаются аяксом. В данном случае, как мне кажется, они загружаются аяксом.

глупость конечно, но можно ещё использовать сложную конструкцию с проверкой .prop("complete") у всех картинок