Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]ladny efekt przejscia pomiedzy zdjeciami
Forum PHP.pl > Forum > Przedszkole
Kamil Pietrzak
witam,

chce dac na stronke cos takiego:
sa przyciski "1, 2, 3, 4"
uzytkownik klika przycisk i w miejscu obrazka a pojawia si obrazek b
przy uzyciu getElementByld nawet nei widac przejsca, jest za szybko
js nie posiada za bardzo funkcji sleep, wiec tez lipa
zaczalem sie rozgladac za gotowcem
ale poza kiljudziesiecioma poteznymi galeriami nic nie znalazlem
zgaduje, ze jest to w jakiejs bibliotece tpu prototype, tylko ja nei wiem jak szukac

dokladnie chodzi mi onp. to takie cos
jest obrazek a, klikam w przycisk, obrazek a wygasa do bialego, pozniej podobnie pojawia sie obrazek b, albo cos podobnego co sprawi, ze obrazek nie bedzie sie tak mechanicznie zmienial
230005
Nie ma sleep, ale jest setInterval(). A jeszcze prościej, jeśli zrobisz to przy użyciu frameworka. Jeśli się zdecydujesz, to polecam jQuery i jego metodę fadeIn().
Kamil Pietrzak
z ta funkcja mialem spore problemy, zeby przekazac argumenty funkcji z zmiennych
moze trzeba byoby kombinowac cos w strone eval, o ile jest odpowienik w js
ale przeciez to oczywiste ze frameworki to potrafia, tylko ja nigdy zadnego nie uzywalem

zaraz zobacze ta funkcje w jquery
mam co prawa juz zaladowany prototype do lightobxa, ale ew. jest jego odpowienik w jquery gdyby sie gryzly
b_chmura
Z wykorzystaniem mootools:

  1. var imgStr = $$(".numerki");//...w tą klase umieść numerki do zdjęć
  2. var imgImg = $$(".obrazki");//...w tą klase zdjęcia
  3. var speed = 1000;//.............prędkość pojawiania się obrazka
  4.  
  5. var showImg = [];
  6.  
  7. if(imgStr && imgImg)
  8. {
  9. imgImg[0].set("opacity", 1);
  10.  
  11. imgStr.each(function(el, a)
  12. {
  13. showImg[a] = new Fx.Tween(imgImg[a], {duration: speed, wait: false});
  14.  
  15. el.addEvent("click", function()
  16. {
  17. imgImg.each(function(el, a)
  18. {
  19. el.set("opacity", 0);
  20. });
  21.  
  22. showImg[a].start("opacity", 1);
  23. });
  24.  
  25. });
  26. }


Oczywiście wszystko trzeba dobrze ostylować. Jeśli będziesz i tutaj potrzebował pomocy pisz. Na razie nie chce mi się produkować smile.gif

Pozdrawiam
Chmura B.
Kamil Pietrzak
nie udalo mi sie nic z tym zrobic, zajrzalem nawet do dokumentacji, ale tez lipa
na dzisiaj juz to zostawiam
Skie
A ja tam polecam jak użytkownik wyżej jQuery, ale metodę .animate() a nie .fadeIn().

Kod
$('#'+id).animate({ parametry_css }, czas);


Np.:

Kod
$('#'+id).animate({ opacity: 0; }, 500);
$('#'+id).animate({ opacity: 1; }, 500);


Jak chcesz jeszcze to po zniknięciu obrazka (opacity = 0) w callback function możesz dać coś co podmieni src obrazków i dopiero potem zacząć drugą funckję która
zmieni opacity do 1 :-)
Kamil Pietrzak
kurde... ciagle jednak siedze przy tym:D

zeby bylo ciekawiej to dalem takie cos

  1. s1 = document.getElementById('ImageImageImage').width;
  2.  
  3. function changeSize(minS)
  4. {
  5.  
  6. <?=$alternativeImages;?>
  7.  
  8. s1 = document.getElementById('ImageImageImage').width;
  9. s11 = s1-minS
  10. nS=s1
  11.  
  12. if(nS>minS)
  13. {
  14. nS=nS-3
  15.  
  16. document.getElementById('ImageImageImage').width = nS
  17. }
  18. else
  19. {
  20. document.getElementById('ImageImageImage').src = newImage;
  21. document.write(11)
  22. }
  23.  
  24.  
  25. }
  26.  
  27. function changeImage(f1, f2)
  28. {
  29.  
  30.  
  31.  
  32. s1 = document.getElementById('ImageImageImage').width;
  33. s2 = document.getElementById('ImageImageImage').height;
  34.  
  35. speed=10;
  36.  
  37. for(x=1;x<speed;x++)
  38. {
  39. id = setInterval("changeSize(200);", 100);
  40. }
  41.  
  42. s1 = document.getElementById('ImageImageImage').width;
  43.  
  44.  
  45.  
  46. document.getElementById('ImageImageImage').height = s2;
  47.  
  48.  
  49. }
  50.  


i obrazek zwija mi sie automatycznie(styknie, byleby byl jakis efekt a nie natychamiastowa podmiana), udalo mi sie nawet dac rozwijanie, tylko jest problem z argumentami do funkcji przez setInterval

ale to i tak totaly syf i dzielo przypadku
nie mam zielonego pojecia jak to sie stalo, ze w ogole dziala biggrin.gif

dalbym jquery, ale wtedy musze podmienic lightboxa, moze sie zrobi...
pewnie nawet daloby sie cos zrobic z tych moich wypocin

nie wazne... koniec na dzisiaj ;]
b_chmura
ale o co chodzi? przecież podałem Ci gotowy skrypt...
Umieść zdjęcia do diva który ma ich szerokość i wysokość. Ustaw mu position na relative.
Następnie powsadzaj tam wszystkie obrazki. Im ustaw position abosolute, top:0, left: 0; visibiliti: hidden; a klase nazwij obrazki.
Do sterowania daj tyle numerków ile obrazków plus klasa w której będą się znajdować do "numerki" np. <a href="#" class="numerki">1</a>.
Gotowe...
Kamil Pietrzak
Cytat(b_chmura @ 31.01.2010, 22:38:19 ) *
ale o co chodzi? przecież podałem Ci gotowy skrypt...
Umieść zdjęcia do diva który ma ich szerokość i wysokość. Ustaw mu position na relative.
Następnie powsadzaj tam wszystkie obrazki. Im ustaw position abosolute, top:0, left: 0; visibiliti: hidden; a klase nazwij obrazki.
Do sterowania daj tyle numerków ile obrazków plus klasa w której będą się znajdować do "numerki" np. <a href="#" class="numerki">1</a>.
Gotowe...


ok, nie wiedzialem jak zastosowac ta Twoja rade
troche skomplikowane, ale sprobuje ;]
a poczatkowo plan byl taki:
klikam przycisk, zdjecie znika, skrypt spi pol sekundy i pojawia sie nowe biggrin.gif
b_chmura
Skomplikowane? właśnie, że bardzo proste smile.gif oczywiście wcześniej załaduj bibliotekę mootools ;-)

Pozdrawiam
Chmura B.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.