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 štýlovať 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 bude hodiť 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 JavaScripte. Použijem teda tieto 3 obrázky:
Obrázky si uložíme do nášho priečinka /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 priečinka
/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 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 ©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ú za sebou
poskladané 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:
Štýlovanie galérie
Trochu našu galériu vylepšíme cez CSS. Určite ste si všimli pripravené
ID references. 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 sme 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:
Ak 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 ňom nájdeme
js/, images/ a css/, ktoré rozbalíme a
vložíme do priečinka s naším webom. Obrázky z priečinka
images/ prekopírujeme do nášho rovnomenného priečinka.
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ý:
Keď 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. Ak 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 už iste 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é 33x (2.73 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.