Een eenvoudige afbeeldingengalerij maken met behulp van HTML, CSS en JavaScript

Het maken van een eenvoudige afbeeldingengalerij met behulp van HTML, CSS en JavaScript is een geweldige manier om de basisprincipes van webontwikkeling te leren. In de afbeeldingengalerij kunt u door afbeeldingen bladeren door miniaturen te selecteren om de afbeelding op de webpagina te vergroten.

Om de galerij te maken, kunt u HTML gebruiken om de inhoud van de webpagina toe te voegen en CSS om de styling toe te voegen. U kunt JavaScript gebruiken om de galerij interactief te maken wanneer de gebruiker op een van de miniaturen klikt.

Hoe de gebruikersinterface voor de afbeeldingengalerij te maken

Voeg de gebruikersinterface voor de afbeeldingengalerij toe met behulp van HTML en CSS. Dit omvat het toevoegen van een grote afbeelding in het midden van de webpagina, die zal veranderen op basis van de geselecteerde miniatuur. U kunt ook het volledige voorbeeld bekijken

1. Maak een nieuw bestand met de naam "index.html".
2. Voeg in dit bestand de basis HTML-codestructuur toe:

   html>
   <htmllang="nl-VS">
   <hoofd>
   <titel>Afbeeldingengalerijtitel>
   hoofd>
   <lichaam>
   <divklas="inleiding">
   <h2>Afbeeldingengalerijh2>
   <P>Selecteer hieronder een miniatuur om de afbeelding te bekijkenP>
   div>
   lichaam>
   html>

3. Maak een submap met de naam "images". Vul het met verschillende afbeeldingen en geef ze een naam van "image1.jpg" tot "image10.jpg".
4. Voeg in uw HTML-bestand een div toe voor de afbeeldingengalerij:

   <divID kaart="beeldgalerij">
   div>

5. Voeg binnen de afbeeldingsgalerij-div een afbeeldingstag toe om de vergrote geselecteerde afbeelding weer te geven. Toon standaard de eerste afbeelding in de map "images":

   <imgID kaart="huidige afbeelding"src="afbeeldingen/afbeelding1.jpg"alt="Afbeelding 1">

6. Voeg in dezelfde map als uw HTML-bestand een nieuw bestand toe met de naam "styles.css" met de volgende CSS. Voel je vrij om de CSS aan te passen om toe te voegen neumorfe ontwerpcomponenten of maak andere ontwerpaanpassingen met behulp van deze CSS-tips en -trucs.

7. .inleiding { 
   tekst uitlijnen: centrum; 
   font-familie: Ariaal;
   }
   h2 { 
   lettertypegrootte: 36px;
   }
   P { 
   lettertypegrootte: 14pt;
   }
   #beeldgalerij { 
   breedte: 600px; 
   marge: 0 auto;
   }
   #huidige afbeelding { 
   breedte: 100%;
   } 

8. Voeg een link naar je CSS-bestand toe in de head-tag van je HTML-bestand:

   <koppelingrel="stijlblad"type="tekst/css"href="stijlen.css">

Miniaturen toevoegen voor de andere afbeeldingen in de galerij

Momenteel geeft de afbeeldingengalerij alleen de eerste afbeelding weer. Voeg onder de geselecteerde afbeelding een lijst met miniaturen toe. Deze miniaturen geven een voorbeeld weer van alle afbeeldingen in de map "images".

1. Voeg in de afbeeldingsgalerij-div in het HTML-bestand nog een div toe om miniaturen voor de andere afbeeldingen weer te geven:

   <divID kaart="beeld-duimen">div>

2. Voeg in het CSS-bestand wat styling toe voor de lijst met miniaturen:

   #beeld-duimen { 
   weergave: buigen; 
   rechtvaardigen-inhoud: centrum; 
   marge-top: 20px;
   }

3. Voeg in dezelfde map als uw HTML- en CSS-bestanden een nieuw bestand toe met de naam "script.js".
4. Voeg een link naar uw JavaScript-bestand toe onderaan de HTML body-tag:

   <lichaam>
    Uw code hier 
   <scriptsrc="script.js">script>
   lichaam>

5. Haal in het JavaScript-bestand het HTML-element op van de div die de lijst met miniaturen zal opslaan:

   var afbeeldingThumbs = document.getElementById("beeld-duimen");

6. Voeg een for-lus toe om door elk van de 10 afbeeldingen in de galerij te lopen:

   voor (var ik = 1; ik <= 10; ik++) {
   }

7. Maak binnen de lus een nieuw img-element voor elke afbeelding:

   var duim = document.createElement("img");

8. Voeg waarden toe voor de kenmerken "src" en "alt". In dit geval is het "src"-attribuut het bestandspad naar de afbeelding met dezelfde index in de map "images":

   thumb.src = "afbeeldingen/afbeelding" + ik + ".jpg";
   duim.alt = "Afbeelding " + ik;

9. Voeg in uw CSS-bestand een nieuwe klasse toe om de miniatuur van de afbeelding op te maken. U kunt ook andere hover- of overgangs-CSS-stijlen voor de miniaturen toevoegen maak uw website responsief en interactief.

   .duim { 
   breedte: 80px; 
   hoogte: 80px; 
   object-fit: omslag; 
   marge-rechts: 10px; 
   cursor: wijzer;
   }

10. Voeg in het JavaScript-bestand de bovenstaande klasse toe aan de nieuwe miniatuur:

    thumb.classList.add("duim");

11. Voeg de nieuwe miniatuur toe aan het HTML-element dat de lijst met miniaturen bevat:

    imageThumbs.appendChild (duim);

De afbeelding wijzigen wanneer de gebruiker op een miniatuur klikt

Wanneer de gebruiker op een van de miniaturen klikt, wijzigt u de vergrote afbeelding in het midden van de pagina in de geselecteerde afbeelding. U kunt deze functionaliteit toevoegen in het JavaScript-bestand.

1. Haal bovenaan het JavaScript-bestand het HTML-element van de momenteel geselecteerde afbeelding op:

   var huidigAfbeelding = document.getElementById("huidige afbeelding");

2. Binnen de for-loop, voeg een gebeurtenishandler toe die wordt geactiveerd wanneer de gebruiker een van de miniaturen onderaan de pagina selecteert:

   thumb.addEventListener(
   "Klik", functie() {
    }
   );

3. Wijzig in de gebeurtenishandler het kenmerk "src" van de huidige afbeelding in de nieuw geselecteerde afbeelding. U kunt ook het "alt"-attribuut bijwerken:

   huidigeAfbeelding.src = dit.src;
   huidigeAfbeelding.alt = dit.alt;

4. Klik op het bestand "index.html" om het in een webbrowser te openen.
5. Selecteer een van de miniaturen om de afbeelding te bekijken.

Ga door met het uitbreiden van uw JavaScript-kennis

Ongeacht je ervaring is het belangrijk om projecten te blijven bouwen om je kennis uit te breiden. Ga door met het verkennen van andere projecten, zoals het bouwen van een schaakspel, rekenmachine of takenlijst.