Przykładowe galerie

Ga­le­ria zdjęć z Sin­ga­pu­ru. Bez czo­łów­ki. Gór­ny pa­sek na­rzę­dzi­owy ukry­ty, w dolnym pas­ku za­miast mi­nia­tu­rek są wy­świe­tla­ne sza­re kwa­dra­ty (opcja Za­stąp mi­nia­tu­ry ko­lo­ro­wym kwa­dra­tem). Prze­jście ty­pu Prze­ni­ka­nie, włą­czo­ne op­cje: Kadruj do wymiarów okna i Włącz „Start” po uru­cho­mie­niu ga­le­rii. Pre­zen­ta­cja roz­po­czy­na się od lo­so­wo wy­bra­ne­go slaj­du. Włą­czo­na op­cja: Za­trzy­maj auto­ma­tycz­ną zmia­nę slaj­dów po wy­bra­niu in­ne­go slaj­du.p

Ga­le­ria zdjęć z wyprawy do Ke­nii. Za­sto­so­wa­no czo­łów­kę Włas­ną. Pas­ki na­rzę­dzio­we ukry­wa­ne wg op­cji stan­dar­do­wych (3 i 5 se­kund). Prze­jście ty­pu Wstęga, włą­czo­ne opcja: Włącz „Start” po uru­cho­mie­niu ga­le­rii oraz Wyświetl pa­nel z mi­nia­tu­ra­mi po uru­cho­mie­niu ga­le­rii. Wy­ko­rzy­sta­no mo­żli­wość lin­ko­wa­nia zdjęć w ga­lerii do in­nych ser­wisów.p

Galeria podobna do po­wyż­szej, ale włą­czo­no do­dat­ko­wo op­cje: Włącz ani­ma­cję slaj­dów pod­czas po­ka­zu i Kadruj do wy­mia­rów ga­le­rii oraz wy­łą­czo­no wy­świet­la­nie pa­ne­la z mi­nia­tu­ra­mi po uru­cho­mie­niu ga­le­rii.p

Ga­le­ria zdjęć z In­dii. Za­sto­so­wa­no tło mu­zycz­ne z włą­czo­ną op­cją Za­pęt­le­nia dźwię­ku. Czo­łów­ka Włas­na. Pas­ki na­rzę­dzio­we nie ukry­wa­ne (-1 i -1). Prze­jście ty­pu Mi­gaw­ka. Ani­ma­cja zdjęć wy­łą­czo­na. Włączone op­cje: Włącz „Start” po uru­cho­mie­niu i Kad­ruj do wy­mia­rów ok­na. Wskaźnik po­stę­pu – Pa­sek po­zio­my.p

Ta sa­ma ga­le­ria co wy­żej, ale w wer­sji de­mon­stra­cyj­nej. Zwróć uwa­gę na do­dat­ko­we przy­cis­ki w gór­nym menu ga­le­rii oraz na do­dat­ko­wy slajd na dru­giej po­zy­cji.p

Ga­le­ria zdjęć z Maroka utwo­rzo­na ze wszyst­ki­mi op­cja­mi usta­wio­ny­mi do­myśl­nie w ra­mach prze­wo­dni­ka Jak za­cząć?p

Ga­le­ria zdjęć z Ka­pa­do­cji. Prze­jście ty­pu Prze­su­wa­nie. Po­ło­że­nie paska z mi­nia­tu­ra­mi – Do pra­wej kra­wę­dzi z wy­su­wa­niem, pa­sek po­stę­pu – Trój­kąt­ny.p

Przykład prezenta­cji pro­du­któw z wy­ko­rzy­sta­niem na­szej ga­le­rii. W przy­kła­dzie po­ka­za­no jak zinte­gro­wać ga­le­rię ze stro­ną in­ter­ne­to­wą za po­mo­cą wbu­do­wa­ne­go w ga­le­rię inter­fej­su API. Kom­plet­ny przy­kład (wraz z ko­dem) mo­żesz po­brać w dzia­le Do po­bra­nia.p

W tym przy­kła­dzie wy­ko­rzy­stu­je­my wbu­do­wa­ny me­cha­nizm wy­świe­tla­nia opi­sów oraz fun­kcję ich od­czy­ty­wa­nia przez prze­glą­dar­kę. W opi­sach za­mie­szczo­no kod ste­ru­ją­cy fun­kcj­ami ga­le­rii. Mo­żesz po­brać ten przy­kład z dzia­łu Do po­bra­nia wraz z pli­kiem *.xml de­fi­niu­ją­cym ga­le­rię. Po po­bra­niu mo­żesz wy­ge­ne­ro­wać ga­le­rię do­kła­dnie ta­ką, jak w tym przy­kła­dzie, dzię­ki cze­mu bę­dziesz mógł prze­ana­li­zować jak to działa.p

Galeria, w której za­de­mon­stro­wa­no możli­wość pre­zen­ta­cji fil­mów. Włą­czo­no opcję Wyświetl pa­nel z mi­nia­tu­ra­mi po uru­cho­mie­niu ga­le­rii. Wy­ko­rzy­sta­no pro­sty me­cha­nizm za­war­ty w kil­ku li­nij­kach ko­du Java­Script, który po­wo­du­je, że kie­dy film do­bieg­nie do koń­ca zo­sta­nie wy­świet­lo­ny i od­two­rzo­ny na­stęp­ny slajd (film). Otwórz ten przykład w no­wym ok­nie i zo­bacz kod źró­dło­wy stro­ny.p

Galeria fraktali. W ga­le­rii wy­ko­rzy­sta­no mo­żli­wość auto­ma­tycz­ne­go two­rze­nia od­noś­ni­ków dla po­szcze­gól­ny­ch slaj­dów do in­nych ser­wi­sów. Od­noś­nik kie­ru­ją­cy do in­nego ser­wi­su skła­da się ze sta­łe­go pre­fik­su (w tym wypadku – https://​photo.3n.com.pl/), do któ­re­go do­da­wa­na jest naz­wa zdję­cia (slajdu). W kon­sek­wen­cji od­noś­nik ot­wie­ra od­po­wied­nią stro­nę w ban­ku foto­gra­fii.p

Galeria ważek. Wy­ko­rzy­sta­no tło dźwię­ko­we oraz op­cję Do­bierz auto­ma­tycz­nie kie­ru­nek prze­jścia pod­czas zmia­ny slaj­dów. Zmie­niaj wy­mia­ry okna i za­uważ, że kie­ru­nek „od­su­wa­nia” slaj­dów bę­dzie do­sto­so­wy­wał się do kie­run­ku anima­cji (któ­ry z ko­lei za­le­ży od wy­mia­rów ok­na).p

Galeria zdjęć z gór. W gale­rii ze­bra­no ponad 420 zdjęć. Zwróć uwagę w ja­ki spo­sób ga­le­ria ra­dzi so­bie z ta­ką licz­bą zdjęć. Po za­ła­do­wa­niu mi­nia­tu­rek masz prak­tycz­nie na­tych­mia­sto­wy do­stęp do każ­de­go zdję­cia. Zam­knij pa­nel z mi­nia­tu­ra­mi i włącz „Start”. Za­uważ, że ta licz­ba zdjęć nie wpły­wa zna­czą­co na płyn­ność pra­cy ga­le­rii. W galerii włą­czo­no opcję Umieść iko­nę „Start” na mi­nia­tu­rach, dla­te­go wi­dzisz na mi­nia­tu­rach w dol­nym pas­ku przy­cisk 2 lub 3.p

Klasyczna prezentacja zdjęć (wnętrze Kościoła Pokoju w Jaworze). Pa­no­ra­mo­wa­nie oraz po­wię­ksza­nie slaj­dów pod­czas po­ka­zu.p

Ga­le­ria pre­zen­tu­ją­ca ser­wi­sy fir­my 3n.com.pl. War­to zwró­cić uwa­gę na to, że w ga­le­rii, za­miast zdjęć są pre­zen­to­wa­ne in­ne witryny oraz film. Ta­ka moż­li­wość wy­ni­ka z fak­tu, że obiek­tem wy­świet­la­nym w ga­le­rii mo­że być in­na stro­na in­ter­ne­to­wa, a co za tym idzie – w za­sa­dzie do­wol­na treść.p

Galeria stron internetowych. W tej ga­le­rii, po­dob­nie jak wy­żej, pre­zen­tu­je­my stro­ny in­ter­ne­to­we. Ale tym ra­zem są to roz­bu­do­wa­ne, skom­pli­ko­wa­ne ser­wi­sy, któ­re mi­mo za­gnież­dże­nia w ga­le­rii za­cho­wu­ją w peł­ni swo­ją funk­cjo­nal­ność.p

Przy­kład ba­ne­ra re­kla­mo­we­go zbu­do­wa­ne­go za po­mo­cą naszej ga­le­rii. Na uwa­gę za­słu­gu­je fakt, że wy­ko­rzy­sta­no tu dwie ga­le­rie na­ło­żo­ne na sie­bie. Jed­na z nich wy­świe­tla (i zmie­nia) zdję­cia w tle. Dru­ga – zu­peł­nie nie­za­leż­nie od tam­tej – ste­ru­je wy­świet­la­niemi tek­stów (otwórz ten przy­kład w no­wym ok­nie i zo­bacz jak pro­sty jest kod źró­dło­wy te­go roz­wią­za­nia).p