Własne modal i zdjęcie

Cześć

Tworzę własny plugin, który prezentuje dane na warstwie nad treścią strony. Robię to dla funu, ale jedna rzecz mi nie wychodzi i od kilku dni stoję w miejscu.

Okienko ma być wycentrowane względem ekranu, a także jeśli w jego zawartości jest obrazek, którego rozmiary są większe od rozdziałki ekranu to ma być przeskalowany tak, aby cały się zmieścił (tutaj robię obliczenia i nadaję obrazkowi width i height, nie chcę stosować max-width i max-height). Obie te rzeczy działają, ale... gdy obrazek jest już scachowany przez przeglądarkę. Przy pierwszym odpaleniu nie jest przeskalowany, a okienko centruje się, ale tak jakby było puste, czyli zawsze zaczyna się pośrodku ekranu.

Cały kod wklejam poniżej, działający HTML z kodem w załączniku. Przypominam, aby stronę odświeżać przez ctrl+shift+R lub ctrl+F5, aby obrazek za każdym razem był zasysany na nowo.

$.modal = function(content) {

    //dodaj pustego, niewidocznego modala do body
    $('body').append('<div id="modalWrapper" style="display:none;position:absolute;"><div id="modal"></div></div>');
    
    var modal = $('#modal'),
        modalWrapper = $('#modalWrapper');

    //dodaj do body diva z załadowanym contentem, ale wypozycjonuj go poza widocznoscia ekranu
    //nie mozna zamiast tego dac display: none, bo wtedy obrazki z contentu nie beda mialy wymiarow
    //a wymiary sa potrzebne ponizej
    $('body').append('<div id="modalContentWrapper" style="position: absolute; top: -9999px">'+content+'</div>');

    //jezeli obrazki w zawartosci modalContentWrapper sa wyzsze lub szersze
    // od wysokosci ekranu to je przeskaluj
   $('#modalContentWrapper img').each(function(index,element){
       
       var winHeight = $(window).height();
       var winWidth = $(window).width();
       var elHeight = $(element).height();
       var elWidth = $(element).width();
       var heightRatio = winHeight/elHeight;
       var widthRatio = winWidth/elWidth;
       
       if(elHeight>winHeight)
            $(element).attr('height',elHeight*heightRatio);
       if(elWidth>winWidth)
            $(element).attr('width',elWidth*widthRatio);
   });
   
   $('#modalContentWrapper').css('position','static').appendTo('#modal');
    
    //niech caly modal sie pojawia
    modalWrapper.fadeIn('normal');   
    
    //oraz niech zostanie wysrodkowany na ekranie
    modalWrapper.css({top: ($(window).height()-modalWrapper.outerHeight())/2,
                      left: ($(window).width()-modalWrapper.outerWidth())/2});     

};



$(function(){
    
    //odpalenie pluginu
    $.modal('<img src="http://archives.frederatorblogs.com/channel_frederator/files/2008/04/poster_bunny_big.jpg">');
    
});    

Twój kod wykonuje się zanim obrazek jest załadowany, więc zanim przeglądarka zna jego wymiary (podejrzewam, że wtedy ustawia się 0x0, bądź wysokość/szerokość tekstu alt)
Pre-loaduj obrazek przed jego pokazaniem (Google), albo na obrazku zrób event onload, żeby po załadowaniu go w całości przeskalować go jeszcze raz.