22. diel - Galéria obrázkov v HTML/CSS

V minulej lekcii, Štylovanie tabuliek v HTML a CSS, sme upravili sekciu zručnosti a naučili sa štylovať tabuľku.

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 Spring Boote a JavaScriptu. Použijem teda tieto 3 obrázky:

Java Spring Boot kalkulačka - Webové stránky krok za krokom

Diár v JavaScriptu - Webové stránky krok za krokom

Web v HTML a CSS - Webové stránky krok za krokom

Obrázky si uložíme do našej zložky /images.

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, budeme všetkým nastavovať výšku na 128px a pripojíme k ich názvu _preview. Zmenšené obrázky opäť uložme do zložky /images.

Vytvorenie podstránky `references.html`

Vytvoríme si podstránku references.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:

<head>
    <meta charset="utf-8" />
    <meta name="description" content="Applications from SaBi." />
    <meta name="keywords" content="applications, programmer, SaBi, references" />
    <meta name="author" content="SaBi" />
    <link rel="shortcut icon" href="images/icon.ico" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>References</title>
</head>

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 (references.html) priradiť triedu active:

<body>
    <header>
        <div id="logo"><h1>Sam<span>Bittner</span></h1><small>webdeveloper</small></div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="aboutme.html">About&nbsp;Me</a></li>
                <li><a href="skills.html">Skills</a></li>
                <li class="active"><a href="references.html">References</a></li>
                <li><a class="contact-button" href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <article>
    </article>

    <footer>
        Created by &copy;SaBi 2024 for <a href="https://ictdemy.com">ictdemy.com</a>
    </footer>
</body>

Č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:

<article>
    <header>
        <h1>References</h1>
    </header>

        <section>
            <p>Below, you can find samples of my work up to now. I can offer you the opportunity to develop similar custom software.</p>

            <div id="references">
                <a href="images/spring_calc.png" title="Calculator in Java Spring Boot">
                    <img src="images/spring_calc_preview.png" alt="Calculator in Java Spring Boot" />
                </a>
                <a href="images/diary_js.png" title="Diary in JavaScript">
                    <img src="images/diary_js_preview.png" alt="Diary in JavaScript" />
                </a>
                <a href="images/sabi_website.png" title="Web in HTML and CSS">
                    <img src="images/sabi_website_preview.png" alt="Web in HTML and CSS" />
                </a>
        </div>
    </section>
</article>

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:

References

references.html

Š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ň:

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

Nič by nás tu nemalo prekvapiť. S týmito vlastnosťami som sa už stretli.

Zároveň tu zakážeme podčiarkovanie odkazov pomocou tohto ID, ktoré vytvára malú čiarku v dolnej časti medzi obrázkami. Do súboru style.css pridáme:

#references a {
    text-decoration: none;
}

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

Naša galéria teraz vyzerá takto:

References

references.html

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. Obrázky zo zložky images/ prekopírujeme do našej rovnomennej zložky.

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:

<link rel="stylesheet" href="style.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>

Teraz pridáme všetkým odkazom v galérii atribút rel s hodnotou lightbox[references]:

<div id="references">
    <a href="images/spring_calc.PNG" title="Calculator in Java Spring Boot" rel="lightbox[references]">
        <img src="images/spring_calc_preview.png" alt="Calculator in Java Spring Boot" />
    </a>
    <a href="images/diary_js.png" title="Diary in JavaScript" rel="lightbox[references]">
         <img src="images/diary_js_preview.png" alt="Diary in JavaScript" />
    </a>
    <a href="images/sabi_website.png" title="Web in HTML and CSS" rel="lightbox[references]">
        <img src="images/sabi_website_preview.png" alt="Web in HTML and CSS" />
    </a>
</div>

Stránku obnovte a kliknite na náhľad. Výsledok je veľmi pôsobivý:

Referencie Lightbox - Webové stránky krok za krokom

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 About me 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 cvičení, Riešené úlohy k 19.-22. lekciu HTML a CSS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

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é 7x (2.73 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

6 hlasov

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

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity