Płynna zmiana rozmiaru tła pod zdjęciem (animacja) Opcje

[MisiekPolarny]

Witam,

Napisałem własną wersję galerii Lightbox, tylko że dużo prościej. Jednak brakuje mi tego efektu płynnego rozszerzania się pola, w którym potem pojawia się zdjęcie. U mnie przebiega to bez animacji i jest uzależnione tylko od prędkości wczytywania zdjęcia. Rozmiar obszaru pod zdjęciem dostosowuje się do rozmiaru załadowanego zdjęcia.

Jak zrobić taką animację jak w Lightboxie, żeby tło pod zdjęciem płynnie się rozszerzyło do rozmiarów zdjęcia, a dopiero potem pojawiło się zdjęcie? Macie jakieś wskazówki?

Korzystam z czystego Javascript bez dodatków, więc porady związane z JQuery raczej mi nie pomogą. Poza tym wolę spróbować samemu to zrobić, żeby moje dzieło było kompletne (IMG:style_emoticons/default/wink.gif)

Myślałem o zapętlonej zmianie rozmiaru bloku DIV, ale przebiega to tak szybko, że nie widać efektu. Czym można spowolnić wykonywanie pętli? Próbowałem setTimeout'em, ale coś mi nie wychodzi. Czy to w ogóle właściwa droga?

[melkorm]

Dajesz na zdjęcie funkcję onload w które będzie dopiero wrzucał zdjęcie (wtedy pojawi się od razu) ale przed samym wrzuceniem pobierasz szerokość i wysokość zdjęcia i pętlą for sobie rozciągasz tego div'a wzdłuż i wszerz i po zakończonych pętlach jako source obrazka z kanałem alpha wrzucasz obrazek i masz ładny efekt (IMG:style_emoticons/default/tongue.gif)

pseudocod:

Kod

// tutaj wrzucasz do div'a loadera
img.onload = function()
{
// tutaj pobierasz szerokość wysokość obrazka
// animacja, możesz też mieć div'a bez ustawionych parametrów szerokości / wysokości i wrzucić tam obrazek w tło - będzie ładniejszy efekt
// wrzucenie obrazka do div'a (chyba że uprzednio był w tle)
}

Ten post edytował melkorm 9.06.2011, 17:17:03