[JQUERY] Galeria

[drake1004]

Witam mam problem z napisaniem skryptu galerii przy pomocy bibloteczki jquery ,chodzi mi dokładnie o taki efekt jak tutaj by działało:
http://imageflow.finnrudolph.de/

Albumy są pobierane z mysql w pliku:

Kod PHP:

<?php
    $result2=$mysqli->query("SELECT * FROM albumy");
    $ilosc=$result2->num_rows;
    $start=0;
    $ilosc_albumow=5;
    $wykonaj=$ilosc-(2*$ilosc_albumow);
    echo"<div id='albumy'>";
    $result=$mysqli->query("SELECT * FROM albumy");
    echo"<div style=\"vertical-align:top;width:1229px;margin-top:110px;margin-left:auto;margin-right:auto;\"> ";
    while($row=$result->fetch_assoc()){
    echo " <img src='zdjecia/$row[album_okladka]'   id='okladka$row[idalbumy]'   class='okladka'>";}
    echo"<div id='wyswietl_id'></div> </div></div>";
    ?>

obrazki są chowane przy pomocy kodu js i tutaj stanąłem nie wiem jak dalej zrobić ;/ proszę o pomoc, patrzyłem się już w internecie i na forum i jezeli powielam temat to przepraszam nie jestem taki pro jeszcze w programowaniu.
Kod JS:[/php]

Kod:

$(document).ready(function() {
    wartosc_max=1229;
    ilosc_albumow=5;
    max_id=20;
    krok=wartosc_max/max_id;
    wartosc_min=0;
    wartosc2=krok+krok;
    for(i=6;i<max_id+5;i++){
    id2=i;
    $("#okladka"+id2).css("display","none");
    }
    $(document).mousemove(function(e,s){
    // e.pageY=483;e.pageY=501;
    if(e.pageX >krok){
    id=1;
    $("#okladka"+id).hide();
    id=id+ilosc_albumow;
    $("#okladka"+id).show();
    }else{
    id=1;
    $("#okladka"+id).show();
    id=6;
    $("#okladka"+id).hide();
    }
    if ((e.pageX>=wartosc_min && e.pageX <=krok)){
    $("#okladka"+id).animate({width: 209, height: 150},0, "slow");
    }else{id=1;
    $("#okladka"+id).animate({width: 189,height: 130},0, "slow");}
    tyle_razy=max_id-1;
    for(i=1;i<tyle_razy;i++){
    id=i;
    if ((e.pageX>=krok*(i-1) && e.pageX <=krok*i)){
    $("#okladka"+id).animate({width: 209, height: 150},0, "slow");
    }else{
    $("#okladka"+id).animate({width: 189,height: 130},0, "slow");
    }}
    if((e.pageX>=wartosc_max-(krok) && e.pageX <=wartosc_max)){
    id=max_id;
    $("#okladka"+id).css("display","block");
    $("#okladka"+id).animate({width: 209, height: 150},0, "slow");
    }else{
    id=max_id;
    $("#okladka"+id).animate({width: 189,height: 130},0, "slow");
    $("#okladka"+id).css("display","none");
    }
    $("#suwak").draggable(
    {axis:"x",disabled: false,containment: "#pasek", scroll: false });
    });
    });