Jak vytvořit jednoduchou galerii obrázků pomocí HTML, CSS a JavaScriptu

Vytvoření jednoduché galerie obrázků pomocí HTML, CSS a JavaScriptu je skvělý způsob, jak se naučit základy vývoje webu. V galerii obrázků budete moci procházet obrázky výběrem miniatur a zvětšit obrázek na webové stránce.

Chcete-li vytvořit galerii, můžete použít HTML pro přidání obsahu webové stránky a CSS pro přidání stylů. Pomocí JavaScriptu můžete udělat galerii interaktivní, když uživatel klikne na kteroukoli z miniatur.

Jak vytvořit uživatelské rozhraní pro galerii obrázků

Přidejte uživatelské rozhraní pro galerii obrázků pomocí HTML a CSS. To zahrnuje přidání velkého obrázku do středu webové stránky, který se změní na základě vybrané miniatury. Můžete si také prohlédnout celý příklad zdrojový kód na GitHubu.

1. Vytvořte nový soubor s názvem „index.html“.
2. Do tohoto souboru přidejte základní strukturu kódu HTML:

   html>
   <htmllang="en-US">
   <hlava>
   <titul>Galerie Obrázkůtitul>
   hlava>
   <tělo>
   <divtřída="intro">
   <h2>Galerie Obrázkůh2>
   <p>Pro zobrazení obrázku vyberte níže miniaturup>
   div>
   tělo>
   html>

3. Vytvořte podsložku s názvem "images". Naplňte jej několika obrázky a pojmenujte je od „image1.jpg“ po „image10.jpg“.
4. Do souboru HTML přidejte div pro galerii obrázků:

   <divid="Galerie Obrázků">
   div>

5. Do části div galerie obrázků přidejte značku obrázku, aby se zobrazil zvětšený vybraný obrázek. Ve výchozím nastavení zobrazit první obrázek ve složce „images“:

   <imgid="aktuální obrázek"src="images/image1.jpg"alt="Obrázek 1">

6. Do stejné složky jako váš soubor HTML přidejte nový soubor s názvem „styles.css“ s následujícím CSS. Chcete-li přidat, můžete upravit CSS neumorfní konstrukční komponenty nebo pomocí jiných úprav designu tyto CSS tipy a triky.

7. .intro { 
   zarovnání textu: centrum; 
   rodina písem: Arial;
   }
   h2 { 
   velikost písma: 36px;
   }
   p { 
   velikost písma: 14pt;
   }
   #Galerie Obrázků { 
   šířka: 600px; 
   okraj: 0 auto;
   }
   #aktuální obrázek { 
   šířka: 100%;
   } 

8. Přidejte odkaz na svůj soubor CSS do značky head v souboru HTML:

   <odkazrel="stylesheet"typ="text/css"href="styles.css">

Jak přidat miniatury pro ostatní obrázky v galerii

V současné době se v galerii obrázků zobrazuje pouze první obrázek. Pod vybraný obrázek přidejte seznam miniatur. Tyto miniatury zobrazí náhled všech obrázků ve složce "images".

1. Do prvku div galerie obrázků v souboru HTML přidejte další prvek div pro zobrazení miniatur pro ostatní obrázky:

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

2. Do souboru CSS přidejte nějaký styl pro seznam miniatur:

   #obrázek-palec { 
   Zobrazit: flex; 
   ospravedlnit-obsah: centrum; 
   margin-top: 20px;
   }

3. Do stejné složky jako soubory HTML a CSS přidejte nový soubor s názvem „script.js“.
4. Přidejte odkaz na svůj soubor JavaScript ve spodní části značky HTML body:

   <tělo>
    Váš kód zde 
   <skriptsrc="script.js">skript>
   tělo>

5. Uvnitř souboru JavaScript získejte prvek HTML div, který bude ukládat seznam miniatur:

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

6. Přidejte smyčku pro procházení každého z 10 obrázků v galerii:

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

7. Uvnitř smyčky vytvořte pro každý obrázek nový prvek img:

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

8. Přidejte hodnoty pro atributy "src" a "alt". V tomto případě je atributem „src“ cesta k souboru k obrázku se stejným indexem ve složce „images“:

   palec.src = "obrázky/obrázek" + i + ".jpg";
   palec.alt = "Obraz " + i;

9. Do souboru CSS přidejte novou třídu pro úpravu miniatury obrázku. Pro miniatury můžete také přidat další styly pro umístění kurzoru nebo přechodné styly CSS aby byl váš web responzivní a interaktivní.

   .palec { 
   šířka: 80px; 
   výška: 80px; 
   objekt-fit: Pokrýt; 
   okraj-pravý: 10px; 
   kurzor: ukazatel;
   }

10. Do souboru JavaScript přidejte výše uvedenou třídu do nové miniatury:

    thumb.classList.add("palec");

11. Přidejte novou miniaturu do prvku HTML, který obsahuje seznam miniatur:

    imageThumbs.appendChild (palec);

Jak změnit obrázek, když uživatel klikne na miniaturu

Když uživatel klikne na jednu z miniatur, změňte zvětšený obrázek ve středu stránky na vybraný obrázek. Tuto funkci můžete přidat do souboru JavaScript.

1. V horní části souboru JavaScript získejte prvek HTML aktuálně vybraného obrázku:

   var aktuální obrázek = dokument.getElementById("aktuální obrázek");

2. Uvnitř smyčky for, přidat obslužnou rutinu události který se spustí, když uživatel vybere některou z miniatur v dolní části stránky:

   thumb.addEventListener(
   "kliknout", funkce() {
    }
   );

3. Uvnitř obsluhy události změňte atribut "src" aktuálního obrázku na nově vybraný obrázek. Můžete také aktualizovat atribut „alt“:

   currentImage.src = tento.src;
   currentImage.alt = tento.alt;

4. Kliknutím na soubor „index.html“ jej otevřete ve webovém prohlížeči.
5. Chcete-li obrázek zobrazit, vyberte kteroukoli z miniatur.

Pokračujte v rozšiřování znalostí JavaScriptu

Bez ohledu na vaše zkušenosti je důležité pokračovat ve stavebních projektech, abyste rozšířili své znalosti. Pokračujte ve zkoumání dalších projektů, jako je budování šachové hry, kalkulačky nebo seznamu úkolů.