Ako vytvoriť jednoduchú galériu obrázkov pomocou HTML, CSS a JavaScriptu

Vytvorenie jednoduchej galérie obrázkov pomocou HTML, CSS a JavaScriptu je skvelý spôsob, ako sa naučiť základy vývoja webu. V galérii obrázkov budete môcť prechádzať obrázkami výberom miniatúr na zväčšenie obrázka na webovej stránke.

Na vytvorenie galérie môžete použiť HTML na pridanie obsahu webovej stránky a CSS na pridanie štýlu. Pomocou JavaScriptu môžete urobiť galériu interaktívnou, keď používateľ klikne na niektorú z miniatúr.

Ako vytvoriť používateľské rozhranie pre galériu obrázkov

Pridajte používateľské rozhranie pre galériu obrázkov pomocou HTML a CSS. To zahŕňa pridanie veľkého obrázka do stredu webovej stránky, ktorý sa zmení na základe vybranej miniatúry. Môžete si tiež pozrieť celý príklad zdrojový kód na GitHub.

1. Vytvorte nový súbor s názvom „index.html“.
2. Do tohto súboru pridajte základnú štruktúru kódu HTML:

   html>
   <htmllang="en-US">
   <hlavu>
   <titul>Galéria obrázkovtitul>
   hlavu>
   <telo>
   <divtrieda="úvod">
   <h2>Galéria obrázkovh2>
   <p>Ak chcete zobraziť obrázok, vyberte miniatúru nižšiep>
   div>
   telo>
   html>

3. Vytvorte podpriečinok s názvom „images“. Naplňte ho niekoľkými obrázkami a pomenujte ich od „image1.jpg“ po „image10.jpg“.
4. Do súboru HTML pridajte div pre galériu obrázkov:

   <divid="galéria obrázkov">
   div>

5. Vo vnútri časti galérie obrázkov pridajte značku obrázka, aby sa zobrazil zväčšený vybratý obrázok. V predvolenom nastavení sa zobrazí prvý obrázok v priečinku „images“:

   <imgid="aktuálny obrázok"src="images/image1.jpg"alt="Obrázok 1">

6. Do rovnakého priečinka ako súbor HTML pridajte nový súbor s názvom „styles.css“ s nasledujúcim CSS. Ak chcete pridať, môžete upraviť CSS neumorfné konštrukčné komponenty alebo pomocou iných úprav dizajnu tieto CSS tipy a triky.

7. .úvod { 
   zarovnanie textu: stred; 
   font-family: Arial;
   }
   h2 { 
   veľkosť písma: 36px;
   }
   p { 
   veľkosť písma: 14pt;
   }
   #galéria obrázkov { 
   šírka: 600px; 
   marža: 0 auto;
   }
   #aktuálny-obrázok { 
   šírka: 100%;
   } 

8. Pridajte odkaz na svoj súbor CSS do značky head súboru HTML:

   <odkazrel="štýlov"typu="text/css"href="styles.css">

Ako pridať miniatúry pre ostatné obrázky v galérii

V súčasnosti sa v galérii obrázkov zobrazuje iba prvý obrázok. Pod vybratý obrázok pridajte zoznam miniatúr. Tieto miniatúry zobrazia náhľad všetkých obrázkov v priečinku „images“.

1. Do prvku div galérie obrázkov v súbore HTML pridajte ďalší prvok div, aby sa zobrazili miniatúry pre ostatné obrázky:

   <divid="obrázok-palec">div>

2. Do súboru CSS pridajte štýl pre zoznam miniatúr:

   #obrazok-palec { 
   displej: flex; 
   ospravedlniť-obsah: stred; 
   margin-top: 20px;
   }

3. Do rovnakého priečinka ako súbory HTML a CSS pridajte nový súbor s názvom „script.js“.
4. Pridajte odkaz na svoj súbor JavaScript do spodnej časti značky HTML body:

   <telo>
    Váš kód tu 
   <skriptsrc="script.js">skript>
   telo>

5. V rámci súboru JavaScript získajte prvok HTML prvku div, ktorý bude uchovávať zoznam miniatúr:

   var imageTumbs = dokument.getElementById("obrázok-palec");

6. Pridajte cyklus for-loop, aby ste prešli každým z 10 obrázkov v galérii:

   pre (var i = 1; ja <= 10; i++) {
   }

7. Vo vnútri slučky vytvorte nový prvok img pre každý obrázok:

   var palec = dokument.createElement("img");

8. Pridajte hodnoty pre atribúty „src“ a „alt“. V tomto prípade je atribút „src“ cestou k súboru k obrázku v rovnakom indexe v priečinku „images“:

   palec.src = "obrázky/obrázok" + ja + ".jpg";
   palec.alt = "obrázok" + i;

9. Do súboru CSS pridajte novú triedu na úpravu miniatúry obrázka. Pre miniatúry môžete pridať aj iný štýl prechodu kurzorom alebo prechodný štýl CSS aby bol váš web responzívny a interaktívny.

   .palec { 
   šírka: 80px; 
   výška: 80px; 
   objekt-fit: kryt; 
   okraj-pravý: 10px; 
   kurzor: ukazovateľ;
   }

10. Do súboru JavaScript pridajte vyššie uvedenú triedu do novej miniatúry:

    thumb.classList.add("palec");

11. Pridajte novú miniatúru do prvku HTML, ktorý obsahuje zoznam miniatúr:

    imageThumbs.appendChild (palec);

Ako zmeniť obrázok, keď používateľ klikne na miniatúru

Keď používateľ klikne na jednu z miniatúr, zmení zväčšený obrázok v strede stránky na vybratý obrázok. Túto funkciu môžete pridať do súboru JavaScript.

1. V hornej časti súboru JavaScript získajte prvok HTML aktuálne vybratého obrázka:

   var aktuálnyObrázok = dokument.getElementById("aktuálny obrázok");

2. Vo vnútri slučky for, pridať obsluhu udalosti ktorý sa spustí, keď používateľ vyberie ktorúkoľvek z miniatúr v spodnej časti stránky:

   thumb.addEventListener(
   "klik", funkciu() {
    }
   );

3. Vo vnútri obsluhy udalosti zmeňte atribút „src“ aktuálneho obrázka na novo vybratý obrázok. Môžete tiež aktualizovať atribút „alt“:

   currentImage.src = toto.src;
   currentImage.alt = toto.alt;

4. Kliknutím na súbor „index.html“ ho otvoríte vo webovom prehliadači.
5. Ak chcete zobraziť obrázok, vyberte ľubovoľnú miniatúru.

Pokračujte v rozširovaní znalostí jazyka JavaScript

Bez ohľadu na vaše skúsenosti je dôležité pokračovať v budovaní projektov, aby ste si rozšírili svoje znalosti. Pokračujte v skúmaní ďalších projektov, ako je budovanie šachovej hry, kalkulačky alebo zoznamu úloh.