Lekce 22 - Galerie obrázků v HTML/CSS

V minulé lekci, Stylování tabulek v HTML a CSS, jsme upravili sekci dovednosti a naučili se stylovat tabulku.

Dnes v HTML/CSS tutoriálu web kompletně dokončíme. Přidáme sekci reference a naučíme se stylovat galerii obrázků. Ukážeme si použití webového doplňku Lightbox, který je napsaný v jazyce JavaScript.

Reference

Na stránce s referencemi si vytvoříme malou galerii obrázků s aplikacemi a weby, které jste vytvořili. Galerie obrázků se vám určitě hodí nejen na obrázky vašich prací, ale třeba i na fotky a podobně. Já si půjčím obrázek tohoto webu a místní ukázkové aplikace v Javě a Pascalu. Použiji tedy tyto 3 obrázky:

Obrázky si uložíme do naší složky /obrazky.

Galerie obrázků

Začněme tím, že si ke každému obrázku vytvoříme miniaturu. Bylo by velkou chybou zobrazovat náhledy jako velké obrázky, jelikož se dlouho stahují. Proto si ve svém oblíbeném grafickém editoru (GIMPu, PhotoShopu, ...) zmenšete své obrázky, já jsem všem nastavil výšku na 128px a k jejich názvu jsem připojil _nahled. Zmenšené obrázky opět uložme do složky /obrazky.

Vytvoření podstránky `reference.html`

Vytvoříme si podstránku reference.html tak, jako všechny podstránky. Do hlavičky opět vložíme nějaké tagy s metadaty, odkaz na CSS soubor a definici ikony a titulku stránky:

<head>
    <meta charset="utf-8" />
    <meta name="description" content="Aplikace od HoBiho." />
    <meta name="keywords" content="aplikace, programátor, HoBi, reference" />
    <meta name="author" content="HoBi" />
    <link rel="shortcut icon" href="obrazky/ikona.ico" />
    <link rel="stylesheet" href="styl.css" type="text/css" />
    <title>Reference</title>
</head>

V <body> budeme opět mít <header>, <article> a <footer>. Část <header> si nakopírujeme např. z index.html a nezapomeneme položce stránky, na které se vyskytujeme (Reference) přiřadit třídu aktivni:

<body>
    <header>
        <div id="logo"><h1>Honza<span>Bittner</span></h1><small>webdeveloper</small></div>
        <nav>
            <ul>
                <li><a href="index.html">Domů</a></li>
                <li><a href="omne.html">O mně</a></li>
                <li><a href="dovednosti.html">Dovednosti</a></li>
                <li class="aktivni"><a href="reference.html">Reference</a></li>
                <li><a class="kontakt-tlacitko" href="kontakt.html">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <article>
    </article>

    <footer>
        Vytvořil &copy;HoBi 2021 pro <a href="https://itnetwork.cz">itnetwork.cz</a>
    </footer>
</body>

Část <article> bude mít taktéž stejnou strukturu jako zbylé stránky. Do <header> vložíme nadpis a do <section> hlavní obsah stránky:

<article>
        <header>
            <h1>Reference</h1>
        </header>

        <section>
            <p>Níže naleznete ukázky mých dosavadních prací. Mohu vám nabídnout tvorbu podobného softwaru na zakázku.</p>

            <div id="reference">
                <a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě">
                    <img src="obrazky/kalkulacka_java_nahled.png" alt="Kalkulačka v Javě" />
                </a>
                <a href="obrazky/miny_pascal.png" title="Miny v Pascalu">
                    <img src="obrazky/miny_pascal_nahled.png" alt="Miny v Pascalu" />
                </a>
                <a href="obrazky/hobi_web.jpg" title="Web v HTML a CSS">
                    <img src="obrazky/hobi_web_nahled.jpg" alt="Web v HTML a CSS" />
                </a>
            </div>
        </section>
</article>

V kódu jsme si vytvořili <div>, ve kterém jsou poskládané za sebou jednotlivé náhledy. Každý náhled odkazuje na originální (velký) obrázek. U odkazu jsme nastavili atribut title, ten můžeme nastavit každému prvku v HTML. Jeho text se zobrazí jen tehdy, když na element najedeme kurzorem myši:

Reference

reference.html

Stylování galerie

Trochu naši galerii vylepšíme přes CSS. Určitě jste si všimli připraveného ID reference. Nastavíme obrázkům v galerii border, padding, margin a stín:

#reference img {
    border: 1px solid gray;
    padding: 6px;
    box-shadow: 3px 3px 6px #999999;
    margin-right: 6px;
}

Nic by nás zde nemělo překvapit. S těmito vlastnostmi jsem se již setkali.

Zároveň pomocí tohoto ID zde zakážeme podtržení odkazů, které nám dole mezi obrázky dělá drobnou čárku, do styl.css přidáme ještě:

#reference a {
    text-decoration: none;
}

#reference a:hover {
    text-decoration: none;
}

Naše galerie nyní vypadá takto:

Reference

reference.html

Pokud na náhled klikneme, zobrazí se velký obrázek. Efekt je ale poněkud ošklivý, celá stránka zmizí a obrázek je nevzhledně umístěn v levém horním rohu, na prázdné stránce. Ukážeme si, jak to vyřešit lépe.

Lightbox

Lightbox je webový doplněk, napsaný v jazyce JavaScript. Právě JavaScript se používá na dynamické prvky moderních webů, jako je např. vyskakovací okno s galerií obrázků, kterou jistě dobře znáte z mnoha webů. Přes JavaScript je také např. řešeno navigační menu zde na ITnetwork.

Projekt je zadarmo a dostupný na adrese https://github.com/…h/lightbox2/. Stáhnout si ho můžeme přes zelené tlačítko s textem Code. Po kliknutí na tlačítko se nám rozbalí menu a úplně na konci seznamu je ke stažení archiv ZIP (Download ZIP). Soubory, které potřebujeme, jsou ve složce dist/. V ní jsou složky js/, images/ a css/, které rozbalíme a vložíme do složky s naším webem. Podobně, jako musíme CSS připojit k HTML, musíme k HTML připojit i tento skript, aby se na stránce spustil. Do hlavičky stránky <head> vložíme následující odkazy na potřebné skripty a i na CSS soubor lightboxu:

<link rel="stylesheet" href="styl.css" type="text/css" />
<link rel="stylesheet" href="css/lightbox.min.css" type="text/css" media="screen" />
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/lightbox.min.js"></script>

Nyní přidáme všem odkazům v galerii atribut rel s hodnotou lightbox[reference]:

<div id="reference">
    <a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě" rel="lightbox[reference]">
        <img src="obrazky/kalkulacka_java_nahled.png" alt="Kalkulačka v Javě" />
    </a>
    <a href="obrazky/miny_pascal.png" title="Miny v Pascalu" rel="lightbox[reference]">
        <img src="obrazky/miny_pascal_nahled.png" alt="Miny v Pascalu" />
    </a>
    <a href="obrazky/hobi_web.jpg" title="Web v HTML a CSS" rel="lightbox[reference]">
        <img src="obrazky/hobi_web_nahled.jpg" alt="Web v HTML a CSS" />
    </a>
</div>

Stránku obnovte a klikněte na náhled. Výsledek je velmi působivý:

Pokud přidáte na kteroukoli stránku do hlavičky potřebné skripty a poté na nějaký odkaz na obrázek použijete rel="lightbox", zobrazí se v LightBoxu. Pokud navíc uvedete jméno galerie v hranatých závorkách, bude LightBox tyto obrázky chápat jako z jedné galerie a nechá vás mezi nimi přecházet pomocí myši nebo šipek.

Podstránku O mně si jistě již zvládneme dokončit sami. Můžeme si do ní napsat pár slov o tom, co nás k programování přivedlo 🙂 Tímto tedy máme web hotový. Dnešní výsledek máte jako vždy ke stažení v příloze článku.

V následujícím cvičení, Řešené úlohy k 19.-22. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 965x (2.72 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

1137 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Nejčastěji vyhledáváné

Lekce 22 - Galerie obrázků v HTML/CSS

Reference

Galerie obrázků

Vytvoření podstránky reference.html

Stylování galerie

Lightbox

Stáhnout

Vytvoření podstránky `reference.html`