[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 ponownie (IMG:style_emoticons/default/smile.gif)

Zobacz co się dzieje w Twoim skrypcie:
1. Klikam na miniaturkę 1 i w tym momencie do kliknięć next, back, stop zostają przypisane funkcje obsługujące zdarzenia.
2. Klikam kolejny raz na miniaturkę, lecz teraz na miniaturkę 2. Po raz kolejny do klawiszy next, back, stop zostają przypisane funkcje obsługi zdarzeń.
3. Teraz klikam na przycisk next. Co się dzieje? A to, że zostaje wykonana funkcja stworzona w punkcie 1. i jednocześnie zostaje wykonana funkcja stworzona w punkcie 2.

To oznacza, że za każdym razem, gdy kliknę na miniaturkę - tworzę nową, kolejną funkcję obsługującą to zdarzenie.

Można by zdefiniować obsługę zdarzeń dla przycisków od razu, ale my chcemy mieć klawisze aktywne dopiero po kliknięciu miniaturki. Za to po kliknięciu stop chcemy mieć klawisze nieaktywne.

Zrobimy to tak, że po kliknięciu na miniaturkę sprawdzamy czy istnieje obsługa jakichkolwiek zdarzeń dla pierwszego przycisku(jeśli istnieje dla pierwszego to i dla reszty). Jeśli istnieje to nic nie robimy, jeśli nie istnieje - to przypisujemy zdarzenie. Realizujemy to za pomocą takiego warunku:

[PHP] pobierz, plaintext 
if($('#back').data('events') == undefined) {
      // dalszy kod
}
[PHP] pobierz, plaintext 

Przy kliknięciu na klawisz stop chcemy, aby wszystkie zdarzenia z trzech przycisków zostały usunięte. A więc zmieniamy postać funkcji obsługi zdarzenia:

[PHP] pobierz, plaintext 
$('#close').click(function(){
      $('#fotx').css('height', '0');
      $('#fotx').css('opacity', '0'); 
      $('#zdjecia').html('');
      $("#back, #next, #close").unbind().css('cursor', '');
}).css('cursor', 'pointer');
[PHP] pobierz, plaintext 

Całość zrealizowana tutaj: http://jsfiddle.net/pqdQz/8/show/
Kod tutaj: http://jsfiddle.net/pqdQz/8/

Pozdrawiam.