JavaScript: Pop up galerija u istoj stranici

[codejan]

Pozdrav postovanoj zajednici,

Posto sam procitao knjigu JavaScript: Sveobuhvatni vodic, jos uvek ne mogu da razlucim kako se pravi galerija u JavaScript-u nalik na Facebook galeriju (Znam da tu igra i AJAX i, mozda, jQuery, ali mene interesuje priroda resenja).

Pretpostavljam da nije tako sto se umecu nodovi u sam dokument(Zato sto bi se struktura dokumenta razbila sama po sebi i ne bi izgledalo tako elegantno kao sto izgleda na primeru Facebook-a).

Resenje mi izgleda tako sto bi se napravilo klackanje sa div-ovima i relativnim i apsolutnim pozicioniranjem, ali nisam siguran.

Prakticno mene interesuje kako se resava da se u istom dokumentu pojavi drugi dokument koji je sama slika sa okolnim zamracenjem pozadine?

Animaciju razumem sa gledista JavaScripta.

 

[-dakis-]

Prikaz galerije nema mnogo veze sa javascriptom, već se HTML galerije generiše na serverskoj strani (PHP u slučaju facebook-a). Kada klikneš na dugme recimo da promeniš stranicu galerije, šalješ ajax zahtev serveru i on ti vraća HTML (i onda taj HTML staviš u element u kome galerija treba da stoji).

A to zatamnjenje pozadine je samo CSS, ništa specijalno, zove se overlay. Staviš div koji prekriva celu stranicu (recimo apsolutno pozicioniran sa višim z-indexom od ostalih elemenata) i staviš mu pozadinsku sliku veličine 1x1 pixel koji je crn i 50% transparentan na primer, i onda staviš div koji želiš da bude u fokusu preko toga.

Eto otprilike.

 

[dsk]

prica se po netu: facebook hiphop php framework...

 

[codejan]

Ok -dakis-, znaci ipak je sve to samo CSS, a nije drugi dokument preko prvog. Hvala prijatelju.

 

[codejan]

Jos jedno pitanje: ok, stavim ja taj div oko cele strane i stavim mu pozadinu od jednog piksela. JavaScriptom iskljucujem taj piksel i ukljucujem. I, takodje, tu sliku, koja ce predstavljati tu galeriji, ukljucujem i iskljucujem, takodje, JavaScriptom. Tacno?

Sa Web Developer Tool-om oznacio sam na Facebooku sve div-ove i nema tog spoljnog div-a koji bi trebao biti popunjen tim pikselom, a koji bi, po meni, bio roditeljski za div same slike.

 

[-dakis-]

Da, u suštini javascriptom sakrivaš i prikazuješ stvari, tako što u stvari preko javascript-a menjaš CSS atribute, recimo postavljaš display:none da ih sakriješ. Ili recimo napraviš CSS klasu koja se zove "hidden" i koja ima display:none u sebi i onda preko javascript-a samo dodaješ ili uklanjaš tu klasu sa elemenata. Ako ovo radiš zbog učenja, onda ok; u suprotnom, ima dosta javascript biblioteka koje rade posao za tebe. Proguglaj "lightbox".

Sa Web Developer Tool-om oznacio sam na Facebooku sve div-ove i nema tog spoljnog div-a koji bi trebao biti popunjen tim pikselom, a koji bi, po meni, bio roditeljski za div same slike.

Ne mora da bude roditeljski div, šta više, nema mnogo smisla da bude roditeljski div jer taj isti "overlay" (to zatamnjenje) koristiš za svaku sliku, tako da imaš samo jedan overlay div koji se može nalaziti bilo gde u dokumentu s obzirom da mu je pozicija apsolutna i samo ga pališ/gasiš po potrebi.

Takođe, ne mora da bude ni polu-transparentni pixel koji čini takav efekat. Možeš samo da staviš crnu boju i da staviš opacity na 0.50 što je 50%, ali različiti browseri imaju različitu "sintaksu" za opacity, pa je sigurnije sa transparentnim pikselom.

Što se facebook-a tiče, pogledaj klasu ".fbPhotoTheater". Oni su iskoristili RGBA boju da bi postigli taj efekat. Slovo A u RGBA znači "alpha" (kanal) i određuje transparentnost boje. RGBA nije podržan u dosta browser-a pa ne preporučujem ovaj metod. Facebook verovatno koristi različite metode u zaisnosti od browser-a, mada je cross-browser kompatibilnost nešto sa čime ne moraš sada da se zamaraš.

 

[codejan]

Ne mora da bude roditeljski div, šta više, nema mnogo smisla da bude roditeljski div jer taj isti "overlay" (to zatamnjenje) koristiš za svaku sliku, tako da imaš samo jedan overlay div koji se može nalaziti bilo gde u dokumentu s obzirom da mu je pozicija apsolutna i samo ga pališ/gasiš po potrebi.

Ok, bavim se webom vec par godina aktivnije i opet ne mogu, prijtelju, da razumem ovu gornju stvar. Po mom razmisljanju, da bih u CSS-u zatamnio celu pozadinu oko jednog elementa moram da imam drugi element koji ga okruzuje, tj. roditeljski element.

Bio sam ovde i razumeo sam, u globalu, ovaj primer.

E sad da povezem ova dva pasusa. Da bih ja uradio overlay sa dva bratska div-a morao bih da ih slozim matematicki tako sto bih znao sirinu i visinu div-a slike. Sto je, priznaces, komplikovanije nego da imam jedan roditeljski div kome dam nizi z-index i zatamnim ga.

Po pitanju Facebook galerije, moje razmisljanje je bilo to da se BODY elementu da to zatamnjenje, ali, opet, pitanje je kako taj element moze da ide sa svojim zatamnjenjem preko ostalog svog sadrzaja u njemu i da li je to uopste moguce...

 

[codejan]

Nasao sam resenje na Webu i podelicu ga sa svima.

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

Hvala -dakis- na odgovorima, moram da priznam da sam malo slabiji na pozicioniranju u CSS-u, pa zato sam imao tih nedoumica. Hvala jos jednom. Pozdrav.

 

[-dakis-]

Nema potrebe ni za kakvim matematičkim proračunima. Ključ je u apsolutnom pozicioniranju (position:absolute). Zamisli da su apsolutno pozicionirani elementi "izvađeni" iz ostatka HTML-a i stoje sami za sebe, i jedni iznad/ispod drugih - kao layer-i.

Evo ti primer: http://jsfiddle.net/mbS5m/3/

#overlay je "zatamnjenje" koje tražimo. Ima position:absolute, tako da se nalazi iznad svega ostalog. Pozicioniran je u gornjem levom uglu i ima širinu i visinu 2000px. Zbog overflow:hidden možeš staviti bilo koju vrednost, recimo 5000x5000 i taj element neće povećati stranicu.

#slika je ta neka galerija. Takođe je apsolutno pozicionirana tako da se nalazi iznad svega ostalog. E sad, zameni mesta #overlay i #slika tako da je slika prva, pa onda ide overlay (u HTML-u). Primetićeš da je #slika sada ispod overlay-a, odnosno overlay je na "najvišem layer-u" tako da prekriva sve ostalo. Sad ostavi isti redosled za #overlay i #slika, ali im stavi z-index u CSS-u. z-index, baš kako ime kaže, postavlja element na odgovarajući nivo Z ose (u 3D okruženju). Tako da, ako staviš da overlay ima z-index recimo 10, a #slika 20, #slika će biti "ispred" overlay-a bez obzira na to što u HTML-u ide prvo #slika pa #overlay.

 

[codejan]

Totalno demistifikovano. Hvala jos jednom. 🙂