[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.

[Volume]

Hej, dzieki faktycznie pominalem te kroki.

Ale pojawia sie jeszcze jeden problem - zobacz w demie, ktore dla mnie zrobiles (http://jsfiddle.net/pqdQz/3/show/), ze jesli damy close i ponownie wybierze sie zdjecie do powiekszenia - zdjecia przelaczane w przod i w tyl sie dziwnie mieszaja - nastepuje przejscie z 2 na 4 itp.
Coś nie moge tego ogarnac - z tego wszystkiego kombinowalem i przy zdarzeniu click - close - czyscilem wszystkei zmienne - ale nie tu lezy problem bo ciagle jest to samo...

Czy moze masz/macie pomysl o co moze jeszcze chodzic?

Ps. co do zliczania obrazkow to robie to przez php - ilosc obrazkow generuje php wiec problem z dopisywaniem recznym skryptu odpada. Chociaż jestem ciekaw jak można zliczać obrazki, bez przypisanych jakis identyfikatorow, jeszcze do tego nie dotarłem w swojej nauce js/jquery.

Ten post edytował Volume 12.04.2012, 15:01:19

[tolomei]

Witaj ponownie

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.

[Volume]

Dzieki, bardzo mi pomogles! Sam chyba długo bym na to nie wpadl...