A képgalériák legfontosabb részei az indexoldalak, amelyeken a képek kicsinyített változatait tekinthetik meg a felhasználók, ahol kiválaszthatják, hogy mely képeket szeretnék nagyban is megtekinteni. Már csak azért is fontos az indexoldal kinézete, mert a látogatók ezzel találkoznak először, ez alapján alakul ki bennük az első vélemény a képgalériáról.
Az indexkép ezúttal szó szerint a képek listája
A képek listája
Ahogyan azt sorozatunk korábbi részeiben már többször bebizonyítottuk, az esetek többségében akkor járunk a legjobban, ha a weboldalak tartalmi részét, vagyis a HTML-kódot a lehető legegyszerűbben építjük fel. E tanácsot megfogadva most is a lehető legegyszerűbb megoldást fogjuk választani, és szó szerint vesszük, hogy egy képgaléria indexoldala nem más, mint egy képes lista.
Ezért létrehozunk egy egyszerű felsorolást, vagy más néven rendezetlen listát, ahogyan azt például a menünél is tettük korábban, azzal az apró eltéréssel, hogy most nem egyedi azonosítóval, hanem feltételezve azt a ritka alkalmat, hogy egy oldalon akár több galéria is előfordulhat, osztálynévvel látjuk el (‹ul class="photos"›). Ennek a listának a listaelemeibe egy-egy hivatkozást helyezzünk el, amelyek egy-egy képre mutatnak, a hivatkozásokon belülre pedig a képek kicsinyített változatát, indexképét, ikonját illesszük: ‹li›‹a href="photos/img01.jpg"›‹img src="photos/tn_img01.jpg" alt="" /›‹/a›‹/li›
Amint listánkat lezárjuk egy ‹/ul›-lel, tulajdonképpen készen is vagyunk első galériánk indexoldalának HTML-részével.
Kijjebb tolt keret
Eltérően a korábbiaktól, ezúttal ne nullázzuk ki az összes elem margóját, eltartását és keretét, már csak azért sem, mert ahol számítanak, amúgy is be fogjuk állítani ezeket az egyes elemeknél.
Első galériánk formázását nem visszük túlzásba
Már-már reflexszerűnek mondhatjuk, hogy először is beállítjuk az oldalon megjelenő szövegek alapértelmezett betűtípusát, -stílusát és -méretét a body szekción keresztül (1–5. sorok), bár ezek egy részére most nem is lesz szükségünk, így a címsorunknál csak az ezektől való eltéréseket (nagyobb és félkövér betű), valamint a szöveg középre igazítását kell megadnunk (7-11. sorok).
A képek listájának, vagyis az ‹ul›-nek 780 pixelnyi szélességet állítsunk be, és a jól bevált margin: 0 auto; beállítással igazítsuk középre. Ezenkívül még természetesen el kell tüntetnünk a listaelemek elől a felsorolásjelet (list-style-type: none;), és ha valaki úgy gondolja – mi ezúttal úgy gondoltuk –, akkor még egy kicsit csinosíthatjuk is magát a listát egy háttérszínnel és/vagy egy vékony kerettel. De ha akár háttérszínt, akár keretet adunk a listának, mindenképpen hozzá kell adnunk az overflow stílustulajdonságot auto értékkel is, különben a listaelemek „floatolása” után magának a listának a magassága nulla pixel lenne, és csak egy vékony csíkként jelenne meg a címsor alatt (13–21. sorok). Az előzőekből az is könnyen kikövetkeztethető, hogy magukat a listaelemeket, amelyek ugyebár blokkszintű elemek, kivesszük a normál folyamból egy float stílustulajdonsággal, méghozzá balra „igazítva” (float: left;). Ahogyan azt említettük, emiatt van szükség egy szinttel feljebb a túlcsordulás – ami ez esetben inkább „alulcsordulás” – automatikus kezelésére.
Amikor a keret szó szerint háttere a képnek
Ha most megnézzük oldalunkat, akkor azt láthatjuk, hogy a kis képek szépen sorban, balról jobbra haladva követik egymást, azonban csúnyán egymáshoz tapadnak, és nem igazán néznek jól ki az alapértelmezett kétpixeles kék és lila keretek sem. Éppen ezért a hivatkozásokon belüli képeknek először is adjunk körben egy kis margót (margin: 3px;), majd a keretet egy picit tartsuk el (padding: 2px;) magától a képtől, majd az eltartás területét színezzük fehérre (background: #fff;), az eredetileg kék keretet pedig feketére (border: 2px solid #000;).
A mintaoldal frissítését követően jól látható, hogy képünknek két kerete lett. Egy belső, aminek vastagságát a padding, színét pedig a background tulajdonság határozza meg, hiszen ezt a színt az ‹img› objektum „dobozában” a – nem átlátszó hátterű – képek esetében csak az előbbivel megadott területen lehet látni; és egy külső, amelynek mind a vastagságát, mind a színét a border paramétereivel tudjuk beállítani.
Egyszerű fekete keretek, amelyek elpirulnak, ha az egér a kép fölé ér
Legvégül még annyival fűszerezzük meg első képlistánkat, hogy annak a képnek, amely fölött az egérkurzor mozog, a keretét színezzük pirosra. Elviekben használhatnánk a képre is a :hover pszeudo-osztályt, azonban ezt jellemzően inkább a hivatkozásoknál szoktuk megadni, és mivel a kép amúgy is egy hivatkozáson belül található, így semmi akadálya annak, hogy az img:hover helyett inkább a:hover img stílusjelölőt használjuk. Ráadásul nem szükséges a keret minden tulajdonságát újra megadnunk, elegendő csak az új színt (border-color: red;).
Árnyékolás
A képek egyik tipikus kiemelésének módja az, hogy egy kis árnyékot adunk nekik. Látszólag a legegyszerűbb megoldás az, ha az ikonokat egy képszerkesztő programban látjuk el árnyékhatással, pedig van egy sokkal egyszerűbb és elegánsabb megoldás – ha a böngészővel illesztjük a kis képek alá az árnyékot. Ehhez természetesen szükségünk lesz egy olyan képre, ami semmi mást nem ábrázol, mint egy szépen elhalványuló árnyékot, és legalább olyan nagy, mint amekkora képeken ezt a hatást el szeretnénk érni.
A kép alá teszünk egy kis árnyékot
Az elég egyértelműnek látszik, hogy ezt az átlátszó PNG képet a kis képek mögé kell tennünk háttérképként, ismétlődés nélkül, lentre és jobbra igazítva (background: url(../images/shadow.png) no-repeat bottom right;). Azonban ez még kevés, hiszen így a képünk még eltakarja az árnyékát, ezért – ahogyan azt az első példánál is láttuk – egy kis eltartással helyet kell neki csinálnunk. Miután most helyre csak a kép jobb oldalán és az alján lesz szükség, ezért a paddingját úgy állítsuk be, hogy csak ezeken az oldalakon legyen például 8-8 pixel, bal oldalt és fent pedig maradjon nulla: padding: 0 8px 8px 0;. Miután a kis képek egy hivatkozáson belül találhatók, ezért az alapértelmezett kék-lila keretet is el kell tüntetnünk egy egyszerű border: 0;-val.
Internet Explorer 6 esetén kis segítségre van szükségünk az átlátszó hátterű PNG-k megjelenítéséhez
Ezzel készen is lennénk – ha nem lenne az Internet Explorer 6, ami nem ismeri az átlátszó PNG-ket. Szerencsére a www.twinhelix.com/css/iepngfix/ oldalról letölthető egy kis program, amivel kiküszöbölhetjük a problémát. Miután a .htc állományt és a blank.gif-et elhelyeztük a megfelelő helyeken, nincs is más dolgunk, mint a megfelelő hivatkozást, hivatkozásokat elhelyezni oldalunk fejlécében úgy, hogy ezzel a résszel csak a 7-es verziónál régebbi Internet Explorerek foglalkozzanak (7–11. sorok).
Keretek a kép alatt és fölött
De a kis képek mögé nem csak árnyékot, hanem díszes vagy kevésbé díszes kereteket is elhelyezhetünk – természetesen gondoskodva a megfelelő eltartásról, hogy a keretek teljes pompájukban megjelenhessenek. Ilyen kereteket szó szerint százával találunk az interneten, de a képszerkesztő programok is tucatjával kínálnak különféle díszes rámákat. Csak arra kell nagyon figyelnünk, hogy miután ezzel a technikával a keret nem a képre, hanem a kép mögé kerül, belül legyen annyi hely, ahol a képek kényelmesen elférnek.
A Paint Shop Pro Photo Picture Frame ablakában sok szép képkeretet találunk
Egy kicsit nehezebb a helyzetünk akkor, ha olyan keretet vagy díszítőelemet szeretnénk használni, ami kisebb-nagyobb darabot kitakar a képekből. Egy ilyen elemet természetesen nem tehetünk be háttérképként, hiszen úgy nem a keret takarna a képből, hanem pont fordítva. Ezért szükségünk lesz egy plusz elemre, például egy üres ‹span›‹/span›-ra, amit közvetlenül a kép elé kell elhelyeznünk.
Ha a „díszítést” a fotóra akarjuk tenni, akkor szükségünk lesz egy plusz elemre
Hasonló esetekben magával a képpel nem is igazán kell foglalkoznunk, csak annyit, hogy az alapértelmezett keretét kikapcsoljuk (border: 0;). A trükk első lépése, hogy a listaelem pozicionálását relatívra állítjuk (position: relative;), hogy innentől kezdve a benne elhelyezkedő elemek helyzetét hozzá képest adhassuk meg. A képek szélességének (width) és magasságának (height) beállítása nem feltétlenül kötelező, azonban ezek elhagyása esetén egyes böngészőkben előfordulhat pár pixeles csúszás, ezért biztos, ami biztos alapon érdemes pontosan beállítani a listaelem méretét.
A keret sarka rálóg a képre – vagyis nem tehetjük a kép mögé
A ‹span› elemünket először is alakítsuk sorszintűből blokkszintűvé (display: block;), hogy be tudjuk állítani a pontos méretét, különben a háttérképként megadott keretből vagy díszítésből nem sok látszana. Ezenkívül az objektumot vegyük ki a normál folyamból, hogy mi adhassuk meg a pontos pozícióját (position: absolute;).
Ha a keretet a képre kell tenni, akkor már kell egy kis trükközés
A pozicionálás origója az a legközelebbi szülőelem bal felső sarka lesz, amelynek elhelyezkedését relatívra vagy abszolútra módosítottuk, vagyis esetünkben a listaelem (28-36. sorok). Miután ez a ‹span› az elmozdítása miatt a kép után jelenik meg, így tulajdonképpen „fölé” kerül, így nem árt arról sem gondoskodni, hogy azért legalább helyenként átlátszó legyen. Ahogyan a lemezmellékleten megtalálható példákból is jól látszik, ezzel a módszerrel keretként használhatunk saroklekerekítőt, szélcakkozót, de akár áttetsző fátyolt is – miközben eredeti képeinkhez hozzá sem kell nyúlnunk.
Cakkos szél vagy kerek sarok – a megoldás ugyanaz
Rögzített képek
Természetesen ugyanezzel a módszerrel nemcsak kereteket, hanem kisebb elemeket is elhelyezhetünk képeinken. Például ha valaki aggódik, hogy képei leesnek a többnyire függőleges monitorokról, megteheti, hogy azokat egy-egy rajzszöggel, gemkapoccsal vagy ragasztócsíkkal rögzíti a háttérhez.
Csak látszólag felesleges a felsorolás köré a ‹div› elem, mert csak így lehet tetszőlegesen hosszú a parafatábla
Ehhez nincs is másra szükség, csak néhány megfelelően előkészített kis képre – és a CSS minimális változtatására, hiszen minden kis képecske mérete más, és másképpen is kell pozicionálnunk magához a képhez képest.
Színes fejű rajzszögekkel rögzítjük a véletlenszerű sorrendben kitett képeket
De hogy e hónapra se maradjunk JavaScript nélkül, egy nagyon picit finomítsunk a rajzszöges megoldásunkon. Olyan unalmas, hogy minden képet pontosan ugyanott szúrunk át egy piros fejű rajzszöggel. Ezért egy képszerkesztő programban készítsünk elő néhány más színű rajzszöget is, ezeket helyezzük el az image mappában, és soroljuk fel egy pins nevű tömbben.
Ha kerete van a parafa táblának, akkor már egy kicsit trükköznünk kell
Ezt követően gyűjtsük ki az összes ‹span›-t (összetettebb oldalak esetén természetesen nem árt finomítani, hogy mely ‹span›-okról is van szó), és egyrészt válasszunk egy számot, és ezzel egy színt a pins listáról (bg). Ezután mozdítsuk el a tűt vízszintesen -10 és +10 közötti (dx), függőlegesen pedig -5 és +5 közötti (dy) véletlenszerű pixelszámmal.
Ha elfogy a rajzszög, jól jöhet egy kis cellux
Ezenkívül, hogy fotóink ne mindig ugyanabban a sorrendben jelenjenek meg, egy kicsit keverünk rajtuk. Ezért listánkat már nem osztálynévvel, hanem azonosítóval lássuk el, hogy könnyebb legyen rá hivatkozni (2-3. sorok), majd a listánk elemeiből ötszázszor válasszunk ki kettőt (7-8. sorok), és azokat cseréljük meg (10–14. sorok). Így az oldalfrissítésekkor nemcsak a rajszögek színe és helye változik meg, hanem a képeknek a sorrendje is.
A fotók rögzítésére használhatunk gemkapcsokat is
A cikkben bemutatott példaprogramok és mintaoldalak letölthetők innen.
