need help: photo galley main pic fade in

need help: photo galley main pic fade in

Hi,

I'm starting on jQuery.
I'm just trying to make a simple fadeIn on a php gallery, but i still can't do any good fade(in/out) on the viewer,

Here are the files:

PHP

<?php
    $output = '';
    //$typesArray = (1=>"gif", 2=>"jpeg", 3=>"png", 4=>"swf");
    $img = array();
    $i = 0;
    foreach(new DirectoryIterator('images') as $fileinfo)
    {
        if($fileinfo->isDir() || $fileinfo->isDot()) continue;
        $pathname = $fileinfo->getPathname();
        $type = exif_imagetype($pathname);
        if($type != IMAGETYPE_GIF && $type != IMAGETYPE_JPEG && $type != IMAGETYPE_PNG) continue;
        $filename = $fileinfo->getFilename();
        $output .= "<img src='images/thumbs/".$filename."' name='".$filename."' id='".$i."' onClick='Javascript:view(this.id);' onLoad='Javascript:preLoad(this.name, this.id);' />";
        $img[] = $filename;
        $i ++;
    }
    echo $output."<br />";
    $src = "images/".$img[0];
    echo "<div id='viewerCont'>";
        echo "<img src='".$src."' id='viewer' name='viewer' alt='".$src."' width='550' height='350' />";
    echo "</div>";
?>

Javscript (of course, header and evry thing needed is on a included php file):

// init array
var varTab = new Array();
// preloading function
function preLoad(n, i)
{
    varTab[i] = new Image();
    varTab[i].src = "images/"+n;
}
// jQuery
jQuery(function($){
    $("img").click(function(){
        var target = varTab[$(this).attr('id')].src;
        $("#viewerCont").fadeOut("0");
        $("#viewer").load(function(){
            $("#viewerCont").fadeIn("");
        });
        $("#viewer").attr('src', target);
    });
});

I know first call $("img).click... is not a good solution but this is jsut a test and it works..
Evry thing ok but images in viewer appear before the fades ...

Anybody 's got a solution ?

(sorry for my awful english)

Thanks