Adam
W.
www.fotomody.pl
fotografia mody, IT
Temat: css, html, js - galeria zdjęć, opacity
cześć,mam galerię zdjęć, które od razu są wyświetlane w dużych rozmiarach, jedno pod drugim.
user przewija scrollem żeby zobaczyć kolejne, na ekranie widzi jedno duże zdjęcie i kawałek następnego/poprzedniego.
jak zrobić, żeby te kawałki zdjęć były mniej widoczne (opacity 0.2), a tylko zdjęcie, które aktualnie w całości jest wyświetlane w oknie przeglądarki było całkiem widoczne?
Mateusz Komarnicki Vision Express IT
Temat: css, html, js - galeria zdjęć, opacity
http://slick.pl/pl/Realizacje - najedz na ikony realizacji i przejrzyj kod jQuery z http://slick.pl/design/slick/js/jquery-slick.js
Adam
W.
www.fotomody.pl
fotografia mody, IT
Temat: css, html, js - galeria zdjęć, opacity
Mateusz Komarnicki:
http://slick.pl/pl/Realizacje - najedz na ikony realizacji i przejrzyj kod jQuery z http://slick.pl/design/slick/js/jquery-slick.js
dzięki.
widzę same hovery;)
a chodzi o to, że user nie koniecznie musi najeżdżać kursorem na zdjęcie.
Krzysztof
Kawa
pomysłowy
programista
Temat: css, html, js - galeria zdjęć, opacity
W zdarzeniu scrolla liczysz środek okna(albo inny arbitralny punkt), środki zdjęć i porównujesz odległości. To, które jest najbliżej dostaje klasę bez opacity, reszta klasę z, ewentualnie ustawiasz im opcity indywidualnie jako funkcję odległości od środka.
Michał
Niewitała
Lightweb.pl /
psdHTML.pl
Temat: css, html, js - galeria zdjęć, opacity
http://johnpolacek.github.com/scrollorama/
Mateusz Komarnicki Vision Express IT
Temat: css, html, js - galeria zdjęć, opacity
Hover to byl przyklad. Jak dobrze zinterpretowalem to co chcesz osiagnac - po prostu nadaj miniaturom hurtowo (np. przy pomocy jQ) opacity (fade) a duze zdjecie pozostaw normalnie.Przyciemnieniem / rozjasnieniem steruj poprzez manipulacje addClass, removeClass.
Adam
W.
www.fotomody.pl
fotografia mody, IT
Temat: css, html, js - galeria zdjęć, opacity
Mateusz Komarnicki:
Hover to byl przyklad. Jak dobrze zinterpretowalem to co chcesz osiagnac - po prostu nadaj miniaturom hurtowo (np. przy pomocy jQ) opacity (fade) a duze zdjecie pozostaw normalnie.
Przyciemnieniem / rozjasnieniem steruj poprzez manipulacje addClass, removeClass.
wszystkie zdjęcia są duże.
tak myślałem, żeby wszystkie miały na start opacity np. 0.5, ale jak wykryć, które aktualnie zdjęcie jest na środku okna? o to się rozchodzi :)
Michał
Wachowski
Freelancer na
zakręcie i
bazodanowiec z
bożej łaski
Temat: css, html, js - galeria zdjęć, opacity
Numeruj zdjęcia -N -3 -2 -1 0 +1 +2 +3 +N. To na środku to 0 :)Ewentualnie zapamiętuj który numer jest obecnie... choć to i tak sprowadza się do numerowania.
Adam
W.
www.fotomody.pl
fotografia mody, IT
Temat: css, html, js - galeria zdjęć, opacity
Michał Wachowski:
Numeruj zdjęcia -N -3 -2 -1 0 +1 +2 +3 +N. To na środku to 0 :)
Ewentualnie zapamiętuj który numer jest obecnie... choć to i tak sprowadza się do numerowania.
ale problem w tym, że żaden event oprócz scroll się nie wykonuje.
czyli nie ma być kliknięcia, najechania czy innych takich.
na niektórych stronach, gdzie są właśnie tak zdjęcia prezentowane (duże jedno pod drugim), widać można ładowanie się zdjęć dopiero wtedy gdy user scrolluje na dół strony, wcześniej się nie ładują.
może to jest podobne zdarzenie?:)
Kamil Brenk blog.kamilbrenk.pl
Temat: css, html, js - galeria zdjęć, opacity
1) wszystkie obrazki w css opacity 12) po inicjacji javascript obrazki opacity 0.2 + liczysz każdego wysokość od góry strony i zapisujesz
3) przypinasz zdarzenie do mousewheel i keydown (wykrywasz strzałki)
a) zmieniasz wcześniej oznaczony obrazek (jeśli był wybrany) z opacity 1 na 0.2
b) sprawdzasz scrolla na jakiej wysokości się znajduje i określasz czy jakiś obrazek jest na tej wysokości - jeśli jest to zmieniasz mu opacity na 1 i zapisujesz nr obrazkaKamil B. edytował(a) ten post dnia 26.01.12 o godzinie 21:33
Michał
Wachowski
Freelancer na
zakręcie i
bazodanowiec z
bożej łaski
Temat: css, html, js - galeria zdjęć, opacity
Adam W.:
Michał Wachowski:
Numeruj zdjęcia -N -3 -2 -1 0 +1 +2 +3 +N. To na środku to 0 :)
Ewentualnie zapamiętuj który numer jest obecnie... choć to i tak sprowadza się do numerowania.
ale problem w tym, że żaden event oprócz scroll się nie wykonuje.
czyli nie ma być kliknięcia, najechania czy innych takich.
na niektórych stronach, gdzie są właśnie tak zdjęcia prezentowane (duże jedno pod drugim), widać można ładowanie się zdjęć dopiero wtedy gdy user scrolluje na dół strony, wcześniej się nie ładują.
może to jest podobne zdarzenie?:)
Jedno z drugim nie ma nic wspólnego.
Doczytywanie zdjęć jest logicznym wynikiem wielkości zdjęć. Użytkownik na starcie dostaje kilka zdjęć. Resztę w razie potrzeby doczytuje się w momencie gdy dojdzie do nich.
Wszystko sprowadza się do 3 zadań jakie musi obsłużyć twój skrypt.
1. Musisz znaleźć zdjęcie obecnie oglądane - tak jak napisał Kamil - licząc pozycje, albo używając numerowania,
2. Musisz obsłużyć przesunięcie zdjęć, czy użyjesz stałego przesunięcia, czy zdasz się na natywny scroll przeglądarki, nie ma znaczenia.
3. Reagować na określone eventy i wywoływać powyższe.
Jeśli dobrze napiszesz, to nie będzie znaczenia czy skrypt pracuje "full screen" czy w jakimś kontenerze, czy reaguje na scroll, keypress, mouseover czy na click. Podobnie nie będzie miało znaczenia czy zmieniasz opacity czy rozmiar.
Adam
W.
www.fotomody.pl
fotografia mody, IT
Temat: css, html, js - galeria zdjęć, opacity
Michał Niewitała:
http://johnpolacek.github.com/scrollorama/
dzięki:)
fajne to.
tylko czemu te bloki mają ustawione position:absolute przez co psuje mi się cały lay?;/
Michał
Niewitała
Lightweb.pl /
psdHTML.pl
Temat: css, html, js - galeria zdjęć, opacity
Adam W.:
Michał Niewitała:
http://johnpolacek.github.com/scrollorama/
dzięki:)
fajne to.
tylko czemu te bloki mają ustawione position:absolute przez co psuje mi się cały lay?;/
Jeśli masz to online, to podaj linka.
