Weboldalkészítő suli #22 - Képgaléria nyitóoldalak

|

Míg türelmesen várakozunk, hogy a kicsinosított, a bevitt adatokat még az elküldés előtt ellenőrző űrlapunk kitöltésével az érdeklődők regisztráljanak a konferenciára, nekikezdünk saját „képgaléria-motorunk” fejlesztésének, amivel előbb a konferenciának otthont adó város néhány nevezetességét, a későbbiek során pedig a konferencián készült fotókat mutatjuk majd be.

Hirdetés

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.

 

Hirdetés

 

Az indexkép ezúttal szó szerint a képek listája

 

 

A képek listája

Hirdetés

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›

Hirdetés

 

Amint listánkat lezárjuk egy ‹/ul›-lel, tulajdonképpen készen is vagyunk első galériánk indexoldalának HTML-részével.

 

Hirdetés

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

 

 

Hirdetés

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.

Hirdetés

 

 

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;).

Hirdetés

 

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

 

Hirdetés

 

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;).

 

Hirdetés

Á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

 

Hirdetés

 

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.

 

Hirdetés

 

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).

 

Hirdetés

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.

 

Hirdetés

 

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.

Hirdetés

 

 

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;).

Hirdetés

 

 

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

 

Hirdetés

 

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.

Hirdetés

 

 

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.

Hirdetés

 

 

Színes fejű rajzszögekkel rögzítjük a véletlenszerű sorrendben kitett képeket

 

 

Hirdetés

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

 

 

Hirdetés

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

 

 

Hirdetés

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.

 

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.