[JavaScript]ladny efekt przejscia pomiedzy zdjeciami Opcje

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

[PHP] pobierz, plaintext 
var imgStr  = $$(".numerki");//...w tą klase umieść numerki do zdjęć
var imgImg  = $$(".obrazki");//...w tą klase zdjęcia
var speed   = 1000;//.............prędkość pojawiania się obrazka
 
var showImg = [];
 
if(imgStr && imgImg)
{
  imgImg[0].set("opacity", 1);
 
  imgStr.each(function(el, a)
  {
    showImg[a] = new Fx.Tween(imgImg[a], {duration: speed, wait: false});
 
    el.addEvent("click", function()
    { 
        imgImg.each(function(el, a)
        {
          el.set("opacity", 0);
        });
 
        showImg[a].start("opacity", 1);
    });
 
  });
}
[PHP] pobierz, plaintext 

Oczywiście wszystko trzeba dobrze ostylować. Jeśli będziesz i tutaj potrzebował pomocy pisz. Na razie nie chce mi się produkować (IMG:style_emoticons/default/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

[PHP] pobierz, plaintext 
   s1 = document.getElementById('ImageImageImage').width;
 
  function changeSize(minS)
  {
 
        <?=$alternativeImages;?>
 
        s1 = document.getElementById('ImageImageImage').width;
        s11 = s1-minS
        nS=s1
 
        if(nS>minS)
        {
            nS=nS-3
 
            document.getElementById('ImageImageImage').width = nS 
        }
        else
        {
                document.getElementById('ImageImageImage').src = newImage;
                document.write(11)
        }
 
 
  }
 
  function changeImage(f1, f2)
  {
 
 
 
      s1 = document.getElementById('ImageImageImage').width;
      s2 = document.getElementById('ImageImageImage').height;
 
      speed=10;
 
      for(x=1;x<speed;x++)
      {
          id = setInterval("changeSize(200);", 100);
      }
 
      s1 = document.getElementById('ImageImageImage').width;
 
 
 
      document.getElementById('ImageImageImage').height = s2;
 
 
  }
 
[PHP] pobierz, plaintext 

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 (IMG:style_emoticons/default/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]

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

[b_chmura]

Skomplikowane? właśnie, że bardzo proste (IMG:style_emoticons/default/smile.gif) oczywiście wcześniej załaduj bibliotekę mootools ;-)

Pozdrawiam
Chmura B.