https://bs.serving-sys.com/serving/adServer.bs?cn=display&c=19&mc=imp&pli=29047393&PluID=0&ord=[timestamp]&rtu=-1

Weboldalkészítő suli #25 - Galériák változó nézete

|

Korábban több látványos és interaktív fotógalériát készítettünk kizárólag a CSS stíluslapokra támaszkodva. Most némi JavaScript-támogatással összeállítunk egy igazán „sokoldalú” képtárat. Ám ahhoz, hogy JavaScript programunknak minél kevesebbet kelljen dolgoznia, megfelelően elő kell készítenünk a talajt.

Hirdetés

A weboldalkészítő suli legutóbbi három leckéjében megpróbáltunk minél több lehetőséget bemutatni arra, hogyan lehet kizárólag a kaszkád stíluslapok kínálta lehetőségekre alapozva (vagy legalábbis a JavaScriptet csak némi „fűszerezésként” használva) kicsinosítani egy fotógaléria nyitólapját, majd azt, hogy hogyan lehet ebbe a galériába némi életet vinni: megjeleníteni a képek nagy(obb) változatát, esetleg a képek címeit és a hozzájuk kapcsolódó hosszabb-rövidebb képaláírásokat.

 

Az eredeti fotók átméretezésével készültek el az indexképek
Hirdetés



Ez alkalommal azt fogjuk megnézni, miként tudjuk életünket kissé egyszerűbbé tenni a JavaScript használatával – de a websuli hagyományaihoz híven természetesen azért felruházzuk képtárunkat egy kis extrával is.

 

Hirdetés

 

Képlista – igazolt hiányzóval


Legutóbbi alkalommal azzal a mottóval kezdtük galériánk HTML-kódjának összeállítását, miszerint „győztes csapaton ne változtass!”. Mi most mégis megbontjuk a csapategységet, és egy kicsit egyszerűsítünk a korábban már jól bevált képlistánk felépítésén, egész pontosan megköszönjük az indexképek eddigi hathatós segítségét, és érzékeny búcsút veszünk a thumb osztályú, a fotók kicsinyített változatait tartalmazó képobjektumoktól. Így a hivatkozáson belül kizárólag a teljes méretű fotót tartalmazó ‹img›, a jelenleg a képcím szerepét betöltő ‹b›, valamint a hosszabb képleírásokat magába foglaló ‹em› elemeket tartjuk meg, még a különféle segéd ‹span›-okra sem lesz szükségünk. Minimális dekorációként a container ‹div›-en belül – a képlista előtt – létrehozunk egy üres, ovarlay nevű ‹div›-et (14. sor), amit a képlista áttetsző háttereként fogunk majd használni.

 

Az indexképek „eltűnését” leszámítva nem sok változás történt a legutóbbi leckéhez képest



A budapesti fotók sorát kibővítettük három újabb képpel, azért, hogy később megírandó programunk dolgát egy kicsit nehezebbé tegyük. Ugyanis az új fotók az eddigiektől eltérően nem fekvők, hanem állók, így a szélességük és magasságuk más lesz, mint a régebbieké. Ugyanakkor annyit azért mégiscsak könnyítünk a saját dolgunkon, hogy a fotóknál land (landscape) osztállyal jelöljük meg a fekvő és port (portrait) osztállyal az álló tájolású képeket. Galériánk első (ki)nézetének kialakítása már-már rutinmunka mindazoknak, akik megtanulták (és ugye megtanulták!) a legutóbbi három lecke anyagát – ezért is raktunk bele egy kis „csavart”, hogy azért mégse legyen olyan unalmas.

A korábbiakkal ellentétben most nem foglalkozunk az eredeti méretű fotók megjelenítésével
Hirdetés



A dokumentumot, egész pontosan a ‹body› elemet ismét mintás háttérrel látjuk el, hogy jól láthatóak legyenek a különféle „átlátszóságalapú trükkjeink”, ahogyan a galéria címsorának két sorát is kissé eltérően formázzuk meg, hogy még jobban nézzen ki. A container ‹div›-et a szokásos módon igazítsuk középre, és lássuk el egy dupla fekete kerettel, de mindezeknél sokkal fontosabb, hogy pozícióját állítsuk relatívra, hogy innentől kezdve az ő bal felső sarka legyen a benne lévő elemek origója, de mivel sem a left, sem a top értékét nem piszkáljuk, így elmozdulni emiatt nem fog (26–31. sorok). Az overlay ‹div›-et ez esetben szó szerint takaróként használjuk – rögzítsünk a szülőelem bal felső sarkához, feszítsük ki teljes szélességében és magasságában, valamint gondoskodjunk arról, hogy ez a fehér színű takaró minden „modern böngészőn” félig átlátszó legyen (33–43. sorok). A bal felső sarokhoz rögzítést, vagyis a top és a left stíluselemeket el is hagyhatnánk, hiszen ez az alapértelmezett, ahogyan a „kifeszítést” megoldhatnánk úgy is, hogy nem az elem szélességét és magasságát maximalizáljuk (width: 100%; height: 100%;), hanem a jobb alsó sarkot rögzítjük a szülőelem jobb alsó sarkához (right: 0; bottom: 0;). A végeredmény a lényeg: a container ‹div›-et takarjuk le egy félig átlátszó elemmel, így ezzel elhalványítjuk az oldal mintás hátterét.

A képlista formázása remélhetőleg mostanra már minden websulisnak szinte rutinból menne – ha nem lenne két nem is olyan apró változtatás a korábbiakhoz képest. Az első természetesen az, hogy nincsenek indexképeink – azokat a teljes méretű fotókból állítsuk elő úgy, hogy a fekvő (vagyis land osztályú) képek szélességét 90 pixelre állítjuk, míg az állóknak (vagyis a port osztályúaknak) a magasságát határozzuk meg 60 pixelben. Szerencsére a böngészők – hacsak másképp nem rendelkezünk – a képek méretét arányosan változtatják, így nem kell azzal foglalkoznunk, hogy a „méretpárokat” is megadjuk. Annak érdekében, hogy az álló fotókat tartalmazó listaelemek ugyanúgy 90 pixel szélesek legyenek, ezeknek a képeknek állítsunk be 25-25 pixelnyi margót, mivel a 3:2 képarány miatt a 60 pixel magasság 40 pixel szélességet fog eredményezni (66–73. sorok). Miután ebben a nézetben a képcímre és képaláírásokra nincs szükségünk, ezért ezeket tüntessük el egyszerűen, mintha ott sem lennének (75–78. sorok).

Ha most megnéznénk galériánkat, két furcsaságot vennénk észre: az egyik, hogy a szépen lekicsinyített fotóink is halványabbak lettek, a másik, hogy annak ellenére, hogy minden kép egy hivatkozáson belül található, az egérkurzor alakja egyik fölött sem változik meg. Mindkét jelenség abból adódik, hogy a gondosan elhelyezett takaró ‹div›-ünk nemcsak a container ‹div›-et, hanem a képlistánkat is takarja – teljesen jogosan, hiszen a position: absolute; stílustulajdonság megadásával ezt az elemet a normál folyamban maradt objektumok – mint amilyen jelenleg a képlista is – fölé helyeztük. Miután nem ez a célunk, ezért a képlistánkat vegyük ki a takaró alól úgy, hogy őt is kiemeljük a normál folyamból a position: relative; megadásával (46. sor). Miután képlistánk a HTML-kódban hátrébb helyezkedik el, mint az overlay ‹div› – és a sorrendjüket nem változtatjuk meg z-index segítségével –, így utóbbi már tényleg csak a kívánt szülőobjektumot fogja szépen takarni, a fotókat már nem.

Végül azért, hogy jól látható legyen, melyik kép fölött is áll az egér, ezért ennek az eredetileg „átlátszó színű” keretét (55. sor) és hátterét színezzük ugyanannak a kéknek sötétebb és világosabb árnyalatára (80–83. sorok).

További elrendezések


Hasonlóan a Windows Intézőjéhez és a képböngésző programokhoz készítsük el a képlista legtömörebb megjelenítését, amikor is a képeknek csak a címe látszik. Tulajdonképpen ez esetben van a legegyszerűbb dolgunk, hiszen nem kell mást tennünk, mint eltüntetni magát a képet és a képaláírásokat (70–73. sorok), és hagyni, hogy a félkövér címek simán megjelenjenek a listában.

Hirdetés

 

 

A képet és a képaláírást eltüntettük, a címeket pedig kéthasábos listaként jelenítjük meg



Ám miután galériánkhoz nem igazán illene egy ilyen túl egyszerű megoldás, ezért annyit tegyünk hozzá a fentiekhez, hogy az egyes listaelemek szélességét állítsuk akkorára, hogy két hasábban tudjanak megjelenni, és mintegy felsorolásjelként illesszünk eléjük például egy fényképezőgép ikont (52–58. sorok), amit a szöveg hátterével együtt változtassunk meg, amikor az egér az elem fölé ér (75–82. sorok).

Hirdetés

 

 

A „címek” nézet esetében csak a képcímeket jelenítjük meg – egyedi díszpontozással



Ennek a nézetnek pont az ellentettje, amikor minden látszik, vagyis a listában megjelenik a fotó – természetesen az első nézetnél bevált 90×60 pixeles méretűre kicsinyítve –, mellette pedig a kép címe és a hosszabb képaláírás.

Minden, amit tudunk a fotókról, szép képlistába elrendezve
Hirdetés



Ehhez nem is kell mást tennünk, mint az eredetileg sorszintű elemeket (‹img›, ‹b› és ‹em›) balra folyatott blokkszintű elemekké alakítsuk, minimális egyéb formázások kíséretében (64–91. sorok). Egész pontosan a ‹b›-ket nem is kell balra folyatnunk, mert ezek amúgy is a kép mellett fognak megjelenni, ugyanakkor ha az ‹em›-eknél elhagynánk a float: left;-et, akkor a hosszabb szövegek befolynának a képek alá is, márpedig ez esetben nem ez a cél.

A „teljes nézethez” hasonlóan minden elemet formáznunk kell



Képlistánk negyedik elrendezése csak annyiban tér el az elsőtől, hogy nem 90×60 pixeles befoglaló négyzetekben jelenítjük meg a fotókat, hanem a próba kedvéért 300×200 pixelesekben, és miután a 200 pixel magas állóképeink így 133 pixel szélesek lesznek, ezért a korábbi 25 pixeles margók helyett 83 pixel szélesekre lesz szükségünk.

 

Hirdetés

 

Ekkora képméretnél egy sorban csak két kép fér el

 

 

A miniatűrök nem mások, mint nagyra nőtt indexképek
Hirdetés

 

További előkészületek


Miután ilyen szépen „belőttük” készülő képtárunk különböző nézeteit, módosítsunk egy kicsit az eredeti HTML-kódon. E módosítás során először is a container ‹div› legelejére – az overlay ‹div› elé – szúrjunk be egy újabb listát, ami a különböző nézetek ikonjait, valamint egy nagyon rövid méretválasztó listát fog tartalmazni (15–27. sorok).

Hirdetés

 

 

A „képtartó” elejére illesztjük a nézetváltó ikonokat, mögé pedig a teljes méretű képek megjelenéséhez szükséges elemeket



Ez utóbbinál az egyszerűség kedvéért a méreteket jelölő betűket ne csak megjelenő tartalomként, hanem értékként is vigyük fel, ugyanis egyes böngészők sajnos a value hiányában nem a tartalmat, hanem üres értéket adnak vissza, amit ugyan megkerülhetnénk azzal, hogy megnézzük, melyik a kiválasztott sor, majd lekérdezzük annak tartalmát, de ennél sokkal kényelmesebb és gyorsabb a ‹select› value tulajdonságát elkérni a böngészőtől.

A kiválasztott fotókat, hasonlóan legutóbbi leckénk második galériájához, Lightbox-szerűen fogjuk megjeleníteni, azonban az ehhez valókat – köszönhetően a JavaScript segítségének – ezúttal nem kell minden képnél előkészítenünk, hanem elegendő „egy csomagot” összeállítanunk, például a képlista után (154–163. sorok). Ebben a „csomagban” helyezzünk el egy majdnem ugyanolyan takarót, mint amilyent a képlista mögött is használunk, csak feketét (155. sor), ezenkívül egy kép- (158. sor), egy képcím- (160. sor) és egy képaláírás- (161. sor) tárolót, valamint némi extraként egy „ablakbezárót” (159. sor), ami tulajdonképpen nem lesz más, mint egy nagyra nőtt szorzásjel.

Hirdetés

 

 

Apró változásként az egyes nézetekhez különböző osztályokat rendelünk



Végül a képlista nyitó címkéjén módosítsunk annyit, hogy az osztályt változtassuk azonosítóvá, ugyanakkor osztályként adjuk meg az alapértelmezett nézet stílusát. Értelemszerűen a korábban gondosan összeállított stíluslapokból ki kell vágnunk a képlisták formázását, és globális cserével az ul.photos jelölőket ki kell cserélni ul.photo_list-re, ul.photo_icon-ra, ul.photo_desc-re és ul.photo_thum-re, majd ezeket szépen helyezzük egymás alá az új CSS-ben. Utóbbi nézethez még érdemes előkészíteni a választható méretekhez igazított szélességeket, magasságokat és margókat (például size_m és size_l osztálynéven), hogy ezeknél se a JavaScriptnek kelljen gondolkodnia.

A nézetikonok listájánál a képesített kontrolloknál már bevált módszert használjuk
Hirdetés



Természetesen a két új blokk, vagyis az ikonlista és a nagy képek „vetítővásznának” (elő)formázását is meg kell csinálnunk stíluslapunkban. Az ikonlistát hasonlóképpen egy nagyobb kép háttérben történő tologatásával oldjuk meg, mint ahogyan azt tettük korábban a rádiógombok és a választómezők képesítésénél (49–79. sorok), míg a listát formázzuk meg ugyan, de egyelőre rejtsük el (81–86. sorok), míg a felhasználó a miniatűrök nézetet ki nem választja. Hasonlóképp gondosan végezzük el a fotók teljes méretű megjelenítésére használt „vásznat” és a rajta lévő szöveges elemeket is, így a nagy X-et is (275–324. sorok), ám az első kattintásig természetesen ezt is dugjuk el (276. sor).

A teljes méretben megjelenő kép keretét előre formázzuk meg – már amennyire tudjuk



A lightbox ‹div› és tartalmának formázása során igazából két dolog egyelőre függőben marad. Egyrészt ugyan a ‹div› magasságát beállítottuk 100%-ra, azonban sokszor még ez is kevésnek bizonyulhat, ahogyan most még azt sem tudjuk, hogy a képet és a hozzávalókat tartalmazó lightimg ‹div›-nek milyen szélességet is kell adnunk, hiszen ez természetesen a kiválasztott fotó szélességétől függ.

Hirdetés

Változó galéria


Most már tényleg mindent olyannyira előkészítettünk, hogy JavaScript programunknak szinte alig maradt tennivalója – de azért akad.

JavaScript programunk – az inicializáláson túl – gondoskodik a nézetváltásról és a képek teljes méretű megjelenítéséről



Először is, miután a kép- és a méretlistára az inicializáló részen túl máshol is hivatkozunk, kényelmesebb, ha ezeket globális változóként definiáljuk, majd ezeket rögtön az inicializáló függvény elején állítsuk is be, hogy a megfelelő nevű objektumokra mutassanak (1. és 28–29. sorok). Ezt követően valamennyi ikonhoz rendeljük hozzá a selectView függvényt, paraméterként az ikon azonosítóját átadva (57–61. sorok). Ez a függvény nem csinál mást, mint a kapott azonosító elején lecseréli az „icon_”-t „photo_”-ra, és ezt állítja be a képlista osztálynevének – ezzel megváltoztatva annak megjelenését –, majd ha a „miniatűrök” nézetet választottuk, akkor megjeleníti a méretlistát és meg is hívja a hozzá kapcsolódó changeSize függvényt (ami szükség esetén további osztályokat rendel a képlistához), míg ha a másik három nézet valamelyike lett a befutó, akkor eltünteti a méreteket tartalmazó ‹select› elemet (3–12. sorok). A changeSize függvénynek természetesen akkor is el kell indulni, ha a felhasználó megváltoztatja annak értékét, erről a 63. sorban gondoskodunk is.

A miniatűrökhöz három méretet – és plusz két osztályt – rendelünk



Miután azt szeretnénk, hogy a képekre kattintva azok ne a jelenlegi oldal helyére töltődjenek be – mint ahogy azt teszik még jelen pillanatban –, ezért mondjuk meg a böngészőnek, hogy a képlista bármelyik hivatkozására kattintva showPhoto függvény induljon el, majd szakítsa is meg a további műveleteket (65-67. sorok). Ez a showPhoto függvény először is átmásolja a kijelölt hivatkozáson belül található képet (31. és 35. sorok), annak címét (32. és 36. sorok), valamint leírását (33. és 37. sorok) a lightbox ‹div› megfelelő elemébe. Ezt követően a program megnézi, milyen széles a fotó, és ezt beállítja a lightimg ‹div› szélességének (39–42. sorok), ahogyan azt is megvizsgálja, hogy mekkora felületet is kell letakarni (azaz a dokumentum vagy az ablak hosszabb-e). Ezt a lightbox ‹div› magasságaként állítja be (43. sor), majd – minden lehetséges tájszólásban – megkérdezi a böngészőt arról, hogy hol is van most az oldal teteje (45. sor), és annak megfelelően esetlegesen lejjebb tolja a lightimg ‹div›-et (46. sor), hogy az mindig az ablak teteje alatt 15 pixellel jelenjen meg, végül láthatóvá teszi az eddig rejtett lightbox ‹div›-et (48. sor).

Az ikonokra kattintva megváltozik galériánk kinézete
Hirdetés



Jogosan merülhet fel a kérdés, hogy a képméret lekérdezéséhez miért kell létrehoznunk egy új képobjektumot, amit nem sokkal később törlünk is? Nos, erre az elemre azért van szükségünk, mert a böngészők közül egyedül a Firefox képes megmondani, hogy mekkora is egy kép eredeti mérete (naturalWidth, naturalHeight), az összes többi csak az éppen aktuális (jelen esetben a CSS-ben megadott) méreteket tudja visszaadni.

Miniatűrök nézetben két-, három- és négyhasábos elrendezések közül választhatunk



A legvégén pedig már nem is maradt más dolgunk, mint a bezáró gombot „élővé varázsolni”, hogy amikor rákattintunk, akkor tegye ismét láthatatlanná a lightbox ‹div› tartalmát (69. sor).

A teljes méretű képek bezárásáról külön „gomb” gondoskodik



A cikkben bemutatott programok és mintaoldalak letölthetők innen.

Hirdetés

 

 

 

Hirdetés

 

 

 

Hirdetés

Úgy tűnik, AdBlockert használsz, amivel megakadályozod a reklámok megjelenítését. Amennyiben szeretnéd támogatni a munkánkat, kérjük add hozzá az oldalt a kivételek listájához, vagy támogass minket közvetlenül! További információért kattints!

Engedélyezi, hogy a https://pcworld.hu értesítéseket küldjön Önnek a kiemelt hírekről? Az értesítések bármikor kikapcsolhatók a böngésző beállításaiban.