[JQUERY] Problem z nawigacja zdjec/slajdow Opcje

[Volume]

Witam napisalem sobie taki kod na przerzucanie zdjec i dziala niestabilnie.

Skrypt dziala tak, ze pobiera z id nr i nr ten wskazuje na zrodlo w atrybucie rel ktore jest wyswietalne jako duze.
Stworzylem nawigacje next i back ktora sie zapetla oraz przycisk close do zamkniecia powiekszonego zdjecia.

Problem dokladnie wyglada to tak, ze skrypt dziala w porzadku jesli przerzucam zdjecia do tylu lub do przodu ale w granicach ilosci zdjec od 1 do 4 a jesli cofne z pierwszego zdjecia lub dam do przodu z 4 to skrypt zaczyna wyrzucac zamist zrodla undefined.

Kolejny problem zaczyna sie wtedy gdy uzyje przycisku close - i ponownie wybiore zminiaturek zdjecie do powiekszenia - wtedy nawigacja next i back szwankuje... wywala czasami undefined.

Może ktoś zna lepszy sposob pobierania numeru z wybranego diva (w moim przypadku id="fotx"), np bez użycia atrybutu id?
Ja w tej chwili musze wyciagnac tresc z atrybutu id oraz wyciagnac usuwajac przednie "z" numer, nastepnie formatuje tresc na integer (parseInt) i dopiero moge stosować dzialania +/-.

Bardzo prosze zeby ktos pomogl mi ogarnac problem.

[PHP] pobierz, plaintext 
<div id="fotx">
  <div id="back">back</div>
  <div id="next">next</div>
  <div id="close">close</div>
  <div id="zdjecia"></div>
</div>
<div id="fotki_big1">
  <img id="z1" rel="duze/a.jpg" src="male/a.jpg" alt="zdjecie 1" />
  <img id="z2" rel="duze/b.jpg" src="male/b.jpg" alt="zdjecie 2" />
  <img id="z3" rel="duze/c.jpg" src="male/c.jpg" alt="zdjecie 3" />
  <img id="z4" rel="duze/d.jpg" src="male/d.jpg" alt="zdjecie 4" />
</div>
 
<script type="text/javascript">
$('#fotki_big1 img').click(function ()
{   
 $('#fotx').css('height', 'auto');
 $('#fotx').css('opacity', '1');
 var zrodlo=$(this).attr('rel');
 var idx=$(this).attr('id');
 idx=parseInt(idx.substr(1,2));
 $('#zdjecia').html('<div id="zdjecie"><img rel="' + idx + '" src="' + zrodlo + '" alt="zdjecie" />wybrany(id:' + idx + ') (zrodlo:' + zrodlo +')</div>');
 //$('#fotx').append(i + '<br /><br />');
 
  $('#back').click(function ()
  {
    var id_aktual=$('#zdjecie img').attr('rel');
    var zrodlId=parseInt(id_aktual)-1;
    var id_back=$('#z' + zrodlId).attr('rel');
    if(idx==1) idx=4;
    else idx=parseInt(idx)-1;
    $('#zdjecia').html('<div id="zdjecie"><img rel="' + idx + '" src="' + id_back + '" alt="zdjecie" />cofany(id:' + idx + ') (zrodlo:' + id_back +')</div>');
  }).css('cursor', 'pointer');
 
  $('#next').click(function ()
  {
    var id_aktual2=$('#zdjecie img').attr('rel');
    var zrodlId2=parseInt(id_aktual2)+1;
    var id_next=$('#z' + zrodlId2).attr('rel');
    if(idx==4) idx=1;
    else idx=parseInt(idx)+1;
    $('#zdjecia').html('<div id="zdjecie"><img rel="' + idx + '" src="' + id_next + '" alt="zdjecie" />wyprzedzany(id:' + idx + ') (zrodlo:' + id_next +')</div>');
  }).css('cursor', 'pointer');
 
 
  $('#close').click(function ()
  {
    $('#fotx').css('height', '0');
    $('#fotx').css('opacity', '0'); 
    $('#zdjecia').html('');
  }).css('cursor', 'pointer');
 
}).css('cursor', 'pointer');
 
</script>
[PHP] pobierz, plaintext