Sådan opretter du et simpelt billedgalleri ved hjælp af HTML, CSS og JavaScript

Oprettelse af et simpelt billedgalleri ved hjælp af HTML, CSS og JavaScript er en fantastisk måde at lære det grundlæggende i webudvikling. I billedgalleriet vil du være i stand til at bladre gennem billeder ved at vælge thumbnails for at forstørre billedet på websiden.

For at oprette galleriet kan du bruge HTML til at tilføje websidens indhold og CSS til at tilføje stylingen. Du kan bruge JavaScript til at gøre galleriet interaktivt, når brugeren klikker på et af miniaturebillederne.

Sådan opretter du brugergrænsefladen til billedgalleriet

Tilføj brugergrænsefladen til billedgalleriet ved hjælp af HTML og CSS. Dette inkluderer tilføjelse af et stort billede i midten af ​​websiden, som vil ændre sig baseret på det valgte miniaturebillede. Du kan også se det fulde eksempel

1. Opret en ny fil kaldet "index.html".
2. Tilføj den grundlæggende HTML-kodestruktur i denne fil:

   html>
   <htmllang="da-US">
   <hoved>
   <titel>Billedgallerititel>
   hoved>
   <legeme>
   <divklasse="intro">
   <h2>Billedgallerih2>
   <s>Vælg et miniaturebillede nedenfor for at se billedets>
   div>
   legeme>
   html>

3. Opret en undermappe kaldet "billeder". Udfyld den med flere billeder, og navngiv dem fra "image1.jpg" til "image10.jpg".
4. Tilføj en div til billedgalleriet i din HTML-fil:

   <divid="billedgalleri">
   div>

5. Inde i billedgalleri div skal du tilføje et billedmærke for at vise det forstørrede valgte billede. Vis som standard det første billede i mappen "billeder":

   <imgid="aktuelt billede"src="images/image1.jpg"alt="Billede 1">

6. Tilføj en ny fil kaldet "styles.css" i den samme mappe som din HTML-fil med følgende CSS. Du er velkommen til at ændre CSS for at tilføje neumorfe designkomponenter eller lav andre designjusteringer ved hjælp af disse CSS tips og tricks.

7. .intro { 
   tekstjustering: centrum; 
   skrifttype-familie: Arial;
   }
   h2 { 
   skriftstørrelse: 36px;
   }
   s { 
   skriftstørrelse: 14pt;
   }
   #billedgalleri { 
   bredde: 600px; 
   margen: 0 auto;
   }
   #aktuelt-billede { 
   bredde: 100%;
   } 

8. Tilføj et link til din CSS-fil i head-tagget på din HTML-fil:

   <linkrel="stylesheet"type="tekst/css"href="styles.css">

Sådan tilføjes miniaturebilleder til de andre billeder i galleriet

I øjeblikket viser billedgalleriet kun det første billede. Tilføj en liste med miniaturer under det valgte billede. Disse miniaturer vil vise en forhåndsvisning af alle billederne i mappen "billeder".

1. Inde i billedgalleriet div i HTML-filen, tilføje en anden div for at vise miniaturer for de andre billeder:

   <divid="image-thumbs">div>

2. Inde i CSS-filen skal du tilføje lidt styling til listen over miniaturebilleder:

   #billede-thumbs { 
   Skærm: bøje; 
   retfærdiggøre-indhold: centrum; 
   margin-top: 20px;
   }

3. Tilføj en ny fil kaldet "script.js" i samme mappe som dine HTML- og CSS-filer.
4. Tilføj et link til din JavaScript-fil i bunden af ​​HTML-body-tagget:

   <legeme>
    Din kode her 
   <manuskriptsrc="script.js">manuskript>
   legeme>

5. Inde i JavaScript-filen skal du hente HTML-elementet i den div, der gemmer listen over miniaturer:

   var billedeThumbs = dokument.getElementById("image-thumbs");

6. Tilføj en for-loop for at gå gennem hvert af de 10 billeder i galleriet:

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

7. Inde i løkken skal du oprette et nyt img-element for hvert billede:

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

8. Tilføj værdier for attributterne "src" og "alt". I dette tilfælde er "src"-attributten filstien til billedet i det samme indeks inde i "images"-mappen:

   thumb.src = "billeder/billede" + i + ".jpg";
   thumb.alt = "Billede" + i;

9. Tilføj en ny klasse i din CSS-fil for at style billedets thumbnail. Du kan også tilføje andre svæve- eller overgangs-CSS-styling til miniaturebillederne gør din hjemmeside responsiv og interaktiv.

   .tommelfinger { 
   bredde: 80px; 
   højde: 80px; 
   objekttilpasning: dække over; 
   margin-højre: 10px; 
   cursoren: pointer;
   }

10. Tilføj ovenstående klasse til det nye miniaturebillede i JavaScript-filen:

    thumb.classList.add("tommelfinger");

11. Tilføj det nye miniaturebillede til HTML-elementet, der indeholder listen over miniaturer:

    imageThumbs.appendChild (thumb);

Sådan ændres billedet, når brugeren klikker på et miniaturebillede

Når brugeren klikker på et af miniaturebillederne, skal du ændre det forstørrede billede i midten af ​​siden til det valgte billede. Du kan tilføje denne funktionalitet i JavaScript-filen.

1. Øverst i JavaScript-filen får du HTML-elementet for det aktuelt valgte billede:

   var nuværende billede = dokument.getElementById("aktuelt billede");

2. Inde i for-løkken, tilføje en hændelseshandler der udløses, når brugeren vælger et af miniaturebillederne nederst på siden:

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

3. Inde i hændelseshandleren skal du ændre "src"-attributten for det aktuelle billede til det nyligt valgte billede. Du kan også opdatere "alt"-attributten:

   currentImage.src = det her.src;
   currentImage.alt = det her.alt;

4. Klik på filen "index.html" for at åbne den i en webbrowser.
5. Vælg en af ​​miniaturerne for at se billedet.

Fortsæt med at udvide din JavaScript-viden

Uanset din erfaring er det vigtigt at fortsætte med at bygge projekter for at udvide din viden. Fortsæt med at udforske andre projekter, såsom at bygge et skakspil, lommeregner eller huskeliste.