Egyszerű képgaléria létrehozása HTML, CSS és JavaScript használatával

Egy egyszerű képgaléria létrehozása HTML, CSS és JavaScript használatával nagyszerű módja annak, hogy megtanulja a webfejlesztés alapjait. A képgalériában bélyegképek kiválasztásával lapozhat a képek között a weboldalon lévő kép nagyításához.

A galéria létrehozásához használhatja a HTML-t a weboldal tartalmának, a CSS-t pedig a stílus hozzáadásához. A JavaScript segítségével interaktívvá teheti a galériát, amikor a felhasználó bármelyik bélyegképre kattint.

Hogyan hozzuk létre a Képgaléria felhasználói felületét

Adja hozzá a képgaléria felhasználói felületét HTML és CSS használatával. Ez magában foglalja egy nagy kép hozzáadását a weboldal közepére, amely a kiválasztott miniatűrtől függően változik. A teljes példát is megtekintheti forráskód a GitHubon.

1. Hozzon létre egy új fájlt "index.html" néven.
2. Ebben a fájlban adja hozzá az alapvető HTML kódszerkezetet:

   html>
   <htmllang="en-US">
   <fej>
   <cím>Képgalériacím>
   fej>
   <test>
   <divosztály="intro">
   <h2>Képgalériah2>
   <p>A kép megtekintéséhez válasszon ki egy miniatűrt lentp>
   div>
   test>
   html>

3. Hozzon létre egy "images" nevű almappát. Töltse fel több képpel, és nevezze el őket "kép1.jpg"-től "kép10.jpg"-ig.
4. A HTML-fájlban adjon hozzá egy div elemet a képgalériához:

   <divid="Képgaléria">
   div>

5. A képgaléria div részében adjon hozzá egy képcímkét a kinagyított kiválasztott kép megjelenítéséhez. Alapértelmezés szerint jelenítse meg az első képet az "images" mappában:

   <imgid="aktuális kép"src="images/image1.jpg"alt="1. kép">

6. A HTML-fájllal azonos mappába adjon hozzá egy új "styles.css" nevű fájlt a következő CSS-kóddal. Nyugodtan módosítsa a CSS-t a hozzáadáshoz neumorf tervezési komponensek vagy végezzen más tervezési módosításokat ezeket a CSS tippeket és trükköket.

7. .intro { 
   szöveg igazítás: központ; 
   betűtípus család: Arial;
   }
   h2 { 
   betűméret: 36px;
   }
   p { 
   betűméret: 14pt;
   }
   #Képgaléria { 
   szélesség: 600px; 
   árrés: 0 auto;
   }
   #aktuális-kép { 
   szélesség: 100%;
   } 

8. Adjon hozzá egy hivatkozást a CSS-fájlhoz a HTML-fájl head címkéjében:

   <linkrel="stíluslap"típus="text/css"href="stílusok.css">

Hogyan adhatunk miniatűröket a galériában lévő többi képhez

Jelenleg a képgaléria csak az első képet jeleníti meg. A kiválasztott kép alá adja hozzá a bélyegképek listáját. Ezek a miniatűrök az "images" mappában lévő összes kép előnézetét jelenítik meg.

1. A HTML-fájl képgaléria div részében adjon hozzá egy másik div elemet a többi kép miniatűrjének megjelenítéséhez:

   <divid="kép-hüvelykujj">div>

2. A CSS-fájlon belül adjon hozzá néhány stílust a bélyegképek listájához:

   #kép-hüvelykujj { 
   kijelző: Flex; 
   indokolja-tartalom: központ; 
   margin-top: 20px;
   }

3. A HTML- és CSS-fájlokkal azonos mappába adjon hozzá egy új „script.js” nevű fájlt.
4. Adjon hozzá egy linket a JavaScript-fájlhoz a HTML body címke alján:

   <test>
    Itt a kódod 
   <forgatókönyvsrc="script.js">forgatókönyv>
   test>

5. A JavaScript fájlon belül szerezze be a div HTML elemét, amely tárolja a bélyegképek listáját:

   var imageThumbs = dokumentum.getElementById("kép-hüvelykujj");

6. Adjon hozzá egy for-loop-ot a galéria 10 képének végigjátszásához:

   számára (var i = 1; én <= 10; i++) {
   }

7. A cikluson belül minden képhez hozzon létre egy új img elemet:

   var hüvelykujj = dokumentum.createElement("img");

8. Adjon hozzá értékeket az "src" és az "alt" attribútumokhoz. Ebben az esetben az "src" attribútum a kép fájl elérési útja, amely ugyanazon az indexen található az "images" mappában:

   thumb.src = "képek/kép" + i + ".jpg";
   hüvelykujj.alt = "Kép" + i;

9. A CSS-fájlban adjon hozzá egy új osztályt a kép bélyegképének stílusához. Hozzáadhat más lebegtető vagy átmeneti CSS-stílusokat is a bélyegképekhez tegye reszponzívvá és interaktívvá webhelyét.

   .hüvelykujj { 
   szélesség: 80px; 
   magasság: 80px; 
   tárgyra illő: borító; 
   margó-jobb: 10px; 
   kurzor: mutató;
   }

10. A JavaScript-fájlon belül adja hozzá a fenti osztályt az új indexképhez:

    thumb.classList.add("hüvelykujj");

11. Adja hozzá az új indexképet a bélyegképek listáját tartalmazó HTML-elemhez:

    imageThumbs.appendChild (hüvelykujj);

A kép megváltoztatása, amikor a felhasználó egy miniatűrre kattint

Amikor a felhasználó az egyik miniatűrre kattint, módosítsa az oldal közepén lévő nagyított képet a kiválasztott képre. Ezt a funkciót hozzáadhatja a JavaScript-fájlhoz.

1. A JavaScript-fájl tetején töltse le az aktuálisan kiválasztott kép HTML-elemét:

   var currentImage = dokumentum.getElementById("aktuális kép");

2. A for-hurok belsejében eseménykezelő hozzáadása amely akkor aktiválódik, amikor a felhasználó kiválasztja az oldal alján található bélyegképek bármelyikét:

   thumb.addEventListener(
   "kattintás", funkció() {
    }
   );

3. Az eseménykezelőn belül módosítsa az aktuális kép "src" attribútumait az újonnan kiválasztott képre. Az "alt" attribútumot is frissítheti:

   currentImage.src = ez.src;
   currentImage.alt = ez.alt;

4. Kattintson az "index.html" fájlra a böngészőben való megnyitásához.
5. A kép megtekintéséhez válassza ki a bélyegképek bármelyikét.

Továbbra is bővítse JavaScript-ismeretét

Tapasztalataitól függetlenül fontos, hogy folyamatosan építsen projekteket tudásának bővítése érdekében. Folytassa az egyéb projektek felfedezését, például sakkjátszma, számológép vagy teendőlista összeállítását.