Na wstępie chciałem się przywitać jako że to mój pierwszy post.
A teraz przejdę do rzeczy.
Chcę zrealizować coś na zasadzie interaktywnej galerii zdjęć. Przez "interaktywność" mam na myśli efekty po kliknięciu na miniaturkę zdjęcia, powiększenie zdjęcia i powiedzmy przyciski "następne", "poprzednie" coś podobnego do wielu już znanych skryptów tylko bardzo uproszczone.
Chciał bym to zrobić w javascripcie ale bez używania frameworków.
Jak na razie mam nie wielkie doświadczenie z js więc prosiłbym o przybliżenie tego co chce osiągnąć, wtedy będzie mi łatwiej szukać konkretnych informacji i poszerzyć wiedzę do takiego stopnia aby to zrealizować.
Z góry dzięki.
Pełna wersja: [js] Interaktywne wyświetlanie zdjęć
Nie chodzi mi o to , poprostu chce sam to zrealizować i chodzi mi o przybliżenie tego jak to wygląda.
No wiec tak:
a ) potrzebujesz zrobić "czarne tło", które jest po prostu zwykłym div-em z przezroczystym tłem, przy kliknięciu na zdjęcie po prostu zmieniasz jego widoczność(display w css), bądź tworzysz całego div-a dynamicznie, ustawiając mu "po drodze" odpowiednie style.
b ) tworzysz div-a głównego(ten w którym będzie obrazek) ustawiasz mu odpowiednie style (wyliczasz odległość od górnej krawędzi itd.) - tu tak samo możesz raz go stworzyć i zmieniać mu tylko style, bądź tworzyć z każdym "otworzeniem" poprzez JS(pierwsza metoda jest na pewno szybsza, ale pozostają śmieci w drzewie DOM)
c )następnie w tym div-ie tworzysz odpowiednie elementy to jest <img> na zdjęcie, np. <span> na opis, np. span lub img na przyciski poprzedni, następny
d )przypisujesz jakieś akcje tym przyciskom
Teraz opis całego mechanizmu galerii:
Tworzysz jakąś tablicę ze zdjęciami i opisami (lub np. 2-wymiarową). Zapisujesz w zmiennej aktualny numer. W chwili wyświetlenia przycisku następny w prosty sposób wybierasz odpowiednie zdjęcia. Problemem może być zmiana rozmiarów dla każdego elementu, ale po zastanowieniu powinieneś dojść do pożądanego efektu,a jak już jesteśmy przy efektach to opisze pokrótce efekt zmiany zdjęć po przez wybielanie i znikanie obszaru na, którym jest zdjęcie - zapewne jak się już domyśliłeś zmiana jest tylko przezroczystości w odcieniach np. bieli. Gdy obrazek całkowicie zostanie wybielony zmieniasz szybko obrazek(który wcześniej wczytałeś do pamięci) i z powrotem zmieniasz przezroczystość.
W jakichkolwiek niejasnościach/problemach pisz
Pozdrawiam
a ) potrzebujesz zrobić "czarne tło", które jest po prostu zwykłym div-em z przezroczystym tłem, przy kliknięciu na zdjęcie po prostu zmieniasz jego widoczność(display w css), bądź tworzysz całego div-a dynamicznie, ustawiając mu "po drodze" odpowiednie style.
b ) tworzysz div-a głównego(ten w którym będzie obrazek) ustawiasz mu odpowiednie style (wyliczasz odległość od górnej krawędzi itd.) - tu tak samo możesz raz go stworzyć i zmieniać mu tylko style, bądź tworzyć z każdym "otworzeniem" poprzez JS(pierwsza metoda jest na pewno szybsza, ale pozostają śmieci w drzewie DOM)
c )następnie w tym div-ie tworzysz odpowiednie elementy to jest <img> na zdjęcie, np. <span> na opis, np. span lub img na przyciski poprzedni, następny
d )przypisujesz jakieś akcje tym przyciskom
Teraz opis całego mechanizmu galerii:
Tworzysz jakąś tablicę ze zdjęciami i opisami (lub np. 2-wymiarową). Zapisujesz w zmiennej aktualny numer. W chwili wyświetlenia przycisku następny w prosty sposób wybierasz odpowiednie zdjęcia. Problemem może być zmiana rozmiarów dla każdego elementu, ale po zastanowieniu powinieneś dojść do pożądanego efektu,a jak już jesteśmy przy efektach to opisze pokrótce efekt zmiany zdjęć po przez wybielanie i znikanie obszaru na, którym jest zdjęcie - zapewne jak się już domyśliłeś zmiana jest tylko przezroczystości w odcieniach np. bieli. Gdy obrazek całkowicie zostanie wybielony zmieniasz szybko obrazek(który wcześniej wczytałeś do pamięci) i z powrotem zmieniasz przezroczystość.
W jakichkolwiek niejasnościach/problemach pisz
Pozdrawiam
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.