Ciao,
sto facendo una piccola fotogallery, nella pagina ho l'elenco dei link alle foto:
codice:
...
[img]foto/003/IMG_0001p.JPG[/img]
[img]foto/003/IMG_0001p.JPG[/img]
[img]foto/003/IMG_0001p.JPG[/img]
[img]foto/003/IMG_0001p.JPG[/img]
...
al click imposto l'attributo html del div e lo mostro al centro della pagina:
codice:
function centerDiv(div){
  var DIVwidth = $(div).width();	
  var DIVheight = $(div).height();
  var SCREENwidth = $(document).width();
  var SCREENheight = $(window).height();
  $(div).css({"position":"absolute","left":(SCREENwidth-DIVwidth)/2+"px","top":(SCREENheight-DIVheight)/2+"px"});
}	

$(document).ready(function(){
  $("a[rel='slide']").click(function(event){
    event.preventDefault();
    $("#popupfoto").html('[img]' + $(this).attr('href') + '[/img]');
    centerDiv('#popupfoto');
    $("#popupfoto").fadeIn("slow");
  });
});
Il problema è che la prima volta che faccio click su un link il div mi appare con lo spigolo in alto a sinistra quasi al centro dello schermo, in pratica come $(div).width() e $(div).height() mi restituisce il valore 24 (dato probabilmente dal border e dal padding del div).

La seconda volta che faccio click sullo stesso link invece funziona correttamente, ed infatti questa volta i valori width e height del div vengono letti correttamente.

Se non ho capito male la prima volta che faccio click sul link non fa in tempo a caricare l'immagine, mentre la seconda volta ce l'ha in cache, e quindi la carica prima di chiamare la funzione centerDiv, come posso fare?

Grazie