Reklama: Twoja konkurencja już Cię wyprzedziła SPRAWDŹ JAK

Stwórz profil

Musisz wpisać swoje imię
Musisz wpisać swoje nazwisko
Musisz wpisać poprawny e-mail
Musisz wpisać hasło (min. 8 znaków)
Musisz zaakceptować regulamin

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?
26.01.2012, 18:27

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
26.01.2012, 18:28

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.
26.01.2012, 18:40

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.
26.01.2012, 19:21

Michał Niewitała Lightweb.pl /
psdHTML.pl

Temat: css, html, js - galeria zdjęć, opacity

http://johnpolacek.github.com/scrollorama/
26.01.2012, 19:25

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.
26.01.2012, 19:36

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 :)
26.01.2012, 19:44

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.
26.01.2012, 19:51

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?:)
26.01.2012, 20:23

Kamil Brenk blog.kamilbrenk.pl

Temat: css, html, js - galeria zdjęć, opacity

1) wszystkie obrazki w css opacity 1

2) 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
26.01.2012, 20:47

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.
26.01.2012, 21:48

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?;/
26.01.2012, 22:50

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.
27.01.2012, 12:24



Wyślij zaproszenie do