[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 

[tolomei]

Witaj.

W Twoim skrypcie celnie zauważyłeś, aby sprawdzać wartość zmiennej idx i korygować ją.
To samo musisz robić ze zmiennymi zrodlId oraz zrodlId2.
Wprowadziłem te zmiany w liniach 14 oraz 24.
Dodatkowo dodałem drugi parametr do wszystkich funkcji parseInt(), gdzie odpowiada on za ustawienie prawidłowego systemu liczbowego. Nam zależy tutaj na systemie dziesiętnym. Najlepiej zawsze podawać ten parametr, aby uniknąć niespodzianek.

Dodatkowo dopowiem, że przy inicjowaniu skryptu powinieneś zliczać wszystkie obrazki, aby nie mieć żadnych statycznych informacji w skrypcie.
Gdybyś na przykład teraz chciał dać 10 obrazków - musiałbyś zmieniać skrypt - dzięki zliczaniu na samym początku - mógłbyś tego uniknąć.

Oto kod:

[PHP] pobierz, plaintext 
$(function(){
    $('#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), 10);
        $('#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, 10)-1;
            if(zrodlId==0) zrodlId=4;
            var id_back=$('#z' + zrodlId).attr('rel');
            if(idx==1) idx=4;
            else idx=parseInt(idx, 10)-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, 10)+1;
            if(zrodlId2==5) zrodlId2=1;
            var id_next=$('#z' + zrodlId2).attr('rel');
            if(idx==4) idx=1;
            else idx=parseInt(idx, 10)+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');
});
[PHP] pobierz, plaintext 

Demo masz tutaj: http://jsfiddle.net/pqdQz/3/show/
Pełny kod tutaj: http://jsfiddle.net/pqdQz/3/

Pozdrawiam.