22. diel - Galéria obrázkov v HTML/CSS
Dnes v HTML/CSS tutoriále web kompletne dokončíme. Pridáme sekciu referencie a naučíme sa štylovať galériu obrázkov. Ukážeme si použitie webového doplnku Lightbox, ktorý je napísaný v jazyku JavaScript.
Referencie
Na stránke s referenciami si vytvoríme malú galériu obrázkov s aplikáciami a webmi, ktoré ste vytvorili. Galéria obrázkov sa vám určite hodí nielen na obrázky vašich prác, ale napríklad aj na fotky a podobne. Ja si požičiam obrázok tohto webu a miestne ukážkové aplikácie v Jave a Pascale. Použijem teda tieto 3 obrázky:
\--
Obrázky si uložíme do našej zložky /obrazky.
Galéria obrázkov
Začnime tým, že si ku každému obrázku vytvoríme miniatúru. Bolo by
veľkou chybou zobrazovať náhľady ako veľké obrázky, pretože sa dlho
sťahujú. Preto si vo svojom obľúbenom grafickom editore (GIMPe, PhotoShope, ...) zmenšite svoje obrázky, ja som všetkým
nastavil výšku na 128px ak ich názvu som pripojil
_nahled. Zmenšené obrázky opäť uložme do zložky
/obrazky.
Vytvorenie podstránky
reference.html
Vytvoríme si podstránku reference.html tak, ako všetky
podstránky. Do hlavičky opäť vložíme nejaké tagy s metadátami, odkaz na
CSS súbor a definíciu ikony a titulku stránky:
V <body>
budeme opäť mať <header>, <article> a
<footer>. Časť <header> si nakopírujeme
napr. z index.html a nezabudneme položke stránky, na ktorej sa
vyskytujeme (Referencie) priradiť triedu aktivni:
Časť
<article> bude mať taktiež rovnakú štruktúru ako
zvyšné stránky. Do <header> vložíme nadpis a do
<section> hlavný obsah stránky:
V kóde sme si vytvorili
<div>, v ktorom sú poskladané za sebou jednotlivé
náhľady. Každý náhľad odkazuje na originálny (veľký) obrázok. Pri
odkaze sme nastavili atribút title, ten môžeme nastaviť
každému prvku v HTML. Jeho text sa zobrazí len vtedy, keď na element
nabehneme kurzorom myši:
Štylovanie galérie
Trochu našu galériu vylepšíme cez CSS. Určite ste si všimli pripravené
ID reference. Nastavíme obrázkom v galérii border,
padding, margin a tieň:
Nič by nás tu nemalo prekvapiť. S týmito vlastnosťami som sa už stretli.
Naša galéria teraz vyzerá takto:
Pokiaľ na náhľad klikneme, zobrazí sa veľký obrázok. Efekt je ale trochu škaredý, celá stránka zmizne a obrázok je nevzhľadne umiestnený v ľavom hornom rohu, na prázdnej stránke. Ukážeme si, ako to vyriešiť lepšie.
Lightbox
Lightbox je webový doplnok, napísaný v jazyku JavaScript. Práve JavaScript sa používa na dynamické prvky moderných webov, ako je napr. vyskakovacie okno s galériou obrázkov, ktorú určite dobre poznáte z mnohých webov. Cez JavaScript je tiež napr. riešené navigačné menu tu na ITnetwork.
Projekt je zadarmo a dostupný na adrese https://github.com/…h/lightbox2/.
Stiahnuť si ho môžeme cez zelené tlačidlo s textom Code. Po
kliknutí na tlačidlo sa nám rozbalí menu a úplne na konci zoznamu je na
stiahnutie archív ZIP (Download ZIP). Súbory, ktoré
potrebujeme, sú v priečinku dist/. V nej sú zložky
js/, images/ a css/, ktoré rozbalíme a
vložíme do zložky s naším webom. Podobne, ako musíme CSS pripojiť k HTML,
musíme k HTML pripojiť aj tento skript, aby sa na stránke spustil. Do
hlavičky stránky <head> vložíme nasledujúce odkazy na
potrebné skripty a aj na CSS súbor lightboxu:
Teraz pridáme všetkým
odkazom v galérii atribút rel s hodnotou
lightbox[reference]:
Stránku obnovte a kliknite na náhľad. Výsledok je veľmi pôsobivý:
Pokiaľ pridáte na ktorúkoľvek stránku do hlavičky potrebné skripty a
potom na nejaký odkaz na obrázok použijete rel="lightbox",
zobrazí sa v LightBoxe. Pokiaľ navyše uvediete meno galérie v hranatých
zátvorkách, bude LightBox tieto obrázky chápať ako z jednej galérie a
nechá vás medzi nimi prechádzať pomocou myši alebo šípok.
Podstránku O mne si iste už zvládneme dokončiť sami. Môžeme si do nej napísať pár slov o tom, čo nás k programovaniu priviedlo 🙂 Týmto teda máme web hotový. Dnešný výsledok máte ako vždy na stiahnutie v prílohe článku.
V nasledujúcom kvíze, Záverečný test - Základy HTML a CSS, si vyskúšame nadobudnuté skúsenosti z kurzu.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 477x (2.72 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.