Hur man skapar ett enkelt bildgalleri med HTML, CSS och JavaScript

Att skapa ett enkelt bildgalleri med HTML, CSS och JavaScript är ett bra sätt att lära sig grunderna i webbutveckling. I bildgalleriet kommer du att kunna bläddra igenom bilder genom att välja miniatyrer för att förstora bilden på webbsidan.

För att skapa galleriet kan du använda HTML för att lägga till webbsidans innehåll och CSS för att lägga till stilen. Du kan använda JavaScript för att göra galleriet interaktivt när användaren klickar på någon av miniatyrerna.

Hur man skapar gränssnittet för bildgalleriet

Lägg till gränssnittet för bildgalleriet med HTML och CSS. Detta inkluderar att lägga till en stor bild i mitten av webbsidan, som kommer att ändras baserat på den valda miniatyrbilden. Du kan också se hela exemplet källkod på GitHub.

1. Skapa en ny fil som heter "index.html".
2. Lägg till den grundläggande HTML-kodstrukturen i den här filen:

   html>
   <htmllang="sv-US">
   <huvud>
   <titel>Bildgallerititel>
   huvud>
   <kropp>
   <divklass="intro">
   <h2>Bildgallerih2>
   <sid>Välj en miniatyr nedan för att se bildensid>
   div>
   kropp>
   html>

3. Skapa en undermapp som heter "bilder". Fyll den med flera bilder och namnge dem från "image1.jpg" till "image10.jpg".
4. Lägg till en div för bildgalleriet i din HTML-fil:

   <divid="Bildgalleri">
   div>

5. Inuti bildgalleriet div, lägg till en bildtagg för att visa den förstorade valda bilden. Som standard, visa den första bilden i mappen "bilder":

   <imgid="aktuell bild"src="images/image1.jpg"alt="Bild 1">

6. I samma mapp som din HTML-fil lägger du till en ny fil som heter "styles.css" med följande CSS. Ändra gärna CSS för att lägga till neumorfa designkomponenter eller gör andra designjusteringar med hjälp av dessa CSS-tips och tricks.

7. .intro { 
   textjustera: Centrum; 
   typsnittsfamilj: Arial;
   }
   h2 { 
   textstorlek: 36px;
   }
   sid { 
   textstorlek: 14pt;
   }
   #Bildgalleri { 
   bredd: 600px; 
   marginal: 0 bil;
   }
   #aktuell-bild { 
   bredd: 100%;
   } 

8. Lägg till en länk till din CSS-fil i head-taggen på din HTML-fil:

   <länkrel="stilmall"typ="text/css"href="styles.css">

Hur man lägger till miniatyrer för de andra bilderna i galleriet

För närvarande visar bildgalleriet bara den första bilden. Lägg till en lista med miniatyrer under den valda bilden. Dessa miniatyrer visar en förhandsvisning av alla bilder i mappen "bilder".

1. Inuti bildgalleriet div i HTML-filen, lägg till ytterligare en div för att visa miniatyrer för de andra bilderna:

   <divid="bild-tummar">div>

2. Inuti CSS-filen, lägg till lite stil för listan med miniatyrer:

   #bild-tummar { 
   visa: böja; 
   motivera-innehåll: Centrum; 
   marginal-top: 20px;
   }

3. Lägg till en ny fil som heter "script.js" i samma mapp som dina HTML- och CSS-filer.
4. Lägg till en länk till din JavaScript-fil längst ned i HTML-kroppstaggen:

   <kropp>
    Din kod här 
   <manussrc="script.js">manus>
   kropp>

5. Inuti JavaScript-filen, hämta HTML-elementet för div som kommer att lagra listan med miniatyrer:

   var bildThumbs = dokumentera.getElementById("bild-tummar");

6. Lägg till en for-loop för att gå igenom var och en av de 10 bilderna i galleriet:

   för (var jag = 1; jag <= 10; i++) {
   }

7. Inuti slingan skapar du ett nytt img-element för varje bild:

   var tumme = dokumentera.createElement("img");

8. Lägg till värden för attributen "src" och "alt". I det här fallet är "src"-attributet sökvägen till bilden i samma index i mappen "images":

   thumb.src = "bilder/bild" + i + ".jpg";
   thumb.alt = "Bild " + i;

9. Inuti din CSS-fil lägger du till en ny klass för att formatera bildens miniatyr. Du kan också lägga till annan hovring eller övergångs-CSS-stil för miniatyrerna gör din webbplats responsiv och interaktiv.

   .tumme { 
   bredd: 80px; 
   höjd: 80px; 
   objektpassning: omslag; 
   marginal-höger: 10px; 
   markören: pekare;
   }

10. Inuti JavaScript-filen lägger du till ovanstående klass i den nya miniatyren:

    thumb.classList.add("tumme");

11. Lägg till den nya miniatyren i HTML-elementet som innehåller listan med miniatyrer:

    imageThumbs.appendChild (tumme);

Hur man ändrar bilden när användaren klickar på en miniatyrbild

När användaren klickar på en av miniatyrerna ändrar du den förstorade bilden i mitten av sidan till den valda bilden. Du kan lägga till denna funktion i JavaScript-filen.

1. Överst i JavaScript-filen hämtar du HTML-elementet för den för närvarande valda bilden:

   var aktuell bild = dokumentera.getElementById("aktuell bild");

2. Inne i for-loopen, lägga till en händelsehanterare som utlöses när användaren väljer någon av miniatyrerna längst ned på sidan:

   thumb.addEventListener(
   "klick", fungera() {
    }
   );

3. Inuti händelsehanteraren ändrar du "src"-attributet för den aktuella bilden till den nyligen valda bilden. Du kan också uppdatera "alt"-attributet:

   currentImage.src = detta.src;
   currentImage.alt = detta.alt;

4. Klicka på filen "index.html" för att öppna den i en webbläsare.
5. Välj någon av miniatyrerna för att se bilden.

Fortsätt att utöka din JavaScript-kunskap

Oavsett din erfarenhet är det viktigt att fortsätta bygga projekt för att utöka din kunskap. Fortsätt att utforska andra projekt som att bygga ett schackspel, miniräknare eller att göra-lista.