Hvordan lage et enkelt bildegalleri ved hjelp av HTML, CSS og JavaScript

Å lage et enkelt bildegalleri ved hjelp av HTML, CSS og JavaScript er en fin måte å lære det grunnleggende om webutvikling. I bildegalleriet vil du kunne bla gjennom bilder ved å velge miniatyrbilder for å forstørre bildet på nettsiden.

For å lage galleriet kan du bruke HTML for å legge til nettsideinnholdet og CSS for å legge til stilen. Du kan bruke JavaScript for å gjøre galleriet interaktivt når brukeren klikker på noen av miniatyrbildene.

Hvordan lage brukergrensesnittet for bildegalleriet

Legg til brukergrensesnittet for bildegalleriet ved hjelp av HTML og CSS. Dette inkluderer å legge til et stort bilde i midten av nettsiden, som endres basert på valgt miniatyrbilde. Du kan også se hele eksemplet kildekoden på GitHub.

1. Lag en ny fil kalt "index.html".
2. Inne i denne filen legger du til den grunnleggende HTML-kodestrukturen:

   html>
   <htmllang="no-US">
   <hode>
   <tittel>bildegalleritittel>
   hode>
   <kropp>
   <divklasse="intro">
   <h2>bildegallerih2>
   <s>Velg et miniatyrbilde nedenfor for å se bildets>
   div>
   kropp>
   html>

3. Lag en undermappe kalt "bilder". Fyll den med flere bilder, og navngi dem fra "image1.jpg" til "image10.jpg".
4. I HTML-filen din legger du til en div for bildegalleriet:

   <divid="bildegalleri">
   div>

5. Inne i bildegalleri-div, legg til en bildekode for å vise det forstørrede valgte bildet. Som standard, vis det første bildet i "bilder"-mappen:

   <imgid="nåværende bilde"src="bilder/bilde1.jpg"alt="Bilde 1">

6. I samme mappe som HTML-filen din, legg til en ny fil kalt "styles.css" med følgende CSS. Du må gjerne endre CSS for å legge til nevmorfe designkomponenter eller gjør andre designjusteringer ved å bruke disse CSS-tipsene og -triksene.

7. .intro { 
   tekstjustering: senter; 
   font-familie: Arial;
   }
   h2 { 
   skriftstørrelse: 36px;
   }
   s { 
   skriftstørrelse: 14pt;
   }
   #bildegalleri { 
   bredde: 600px; 
   margin: 0 auto;
   }
   #current-image { 
   bredde: 100%;
   } 

8. Legg til en lenke til CSS-filen din i head-taggen til HTML-filen din:

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

Slik legger du til miniatyrbilder for de andre bildene i galleriet

For øyeblikket viser bildegalleriet bare det første bildet. Legg til en liste over miniatyrbilder under det valgte bildet. Disse miniatyrbildene vil vise en forhåndsvisning av alle bildene i "bilder"-mappen.

1. Inne i bildegalleriet div i HTML-filen, legg til en annen div for å vise miniatyrbilder for de andre bildene:

   <divid="bilde-tommel">div>

2. Inne i CSS-filen, legg til litt stil for listen over miniatyrbilder:

   #bilde-tommel { 
   vise: bøye seg; 
   rettferdiggjøre-innhold: senter; 
   margin-topp: 20px;
   }

3. Legg til en ny fil kalt "script.js" i samme mappe som HTML- og CSS-filene dine.
4. Legg til en lenke til JavaScript-filen din nederst i HTML-kroppskoden:

   <kropp>
    Din kode her 
   <manussrc="script.js">manus>
   kropp>

5. Inne i JavaScript-filen får du HTML-elementet til div-en som vil lagre listen over miniatyrbilder:

   var imageThumbs = dokument.getElementById("bilde-tommel");

6. Legg til en for-løkke for å gå gjennom hvert av de 10 bildene i galleriet:

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

7. Inne i loopen, lag et nytt img-element for hvert bilde:

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

8. Legg til verdier for attributtene "src" og "alt". I dette tilfellet er "src"-attributtet filbanen til bildet i samme indeks i "images"-mappen:

   thumb.src = "bilder/bilde" + i + ".jpg";
   thumb.alt = "Bilde " + i;

9. Inne i CSS-filen din legger du til en ny klasse for å style bildets miniatyrbilde. Du kan også legge til andre sveve- eller overgangs-CSS-stiler for miniatyrbildene gjør nettstedet ditt responsivt og interaktivt.

   .tommel { 
   bredde: 80px; 
   høyde: 80px; 
   objekttilpasning: dekke; 
   marg-høyre: 10px; 
   markøren: pekeren;
   }

10. Inne i JavaScript-filen legger du til klassen ovenfor i det nye miniatyrbildet:

    thumb.classList.add("tommel");

11. Legg til det nye miniatyrbildet i HTML-elementet som inneholder listen over miniatyrbilder:

    imageThumbs.appendChild (thumb);

Hvordan endre bildet når brukeren klikker på et miniatyrbilde

Når brukeren klikker på et av miniatyrbildene, endrer du det forstørrede bildet i midten av siden til det valgte bildet. Du kan legge til denne funksjonaliteten i JavaScript-filen.

1. Øverst i JavaScript-filen får du HTML-elementet til det valgte bildet:

   var gjeldende bilde = dokument.getElementById("nåværende bilde");

2. Inne i for-løkken, legge til en hendelsesbehandler som utløses når brukeren velger noen av miniatyrbildene nederst på siden:

   thumb.addEventListener(
   "klikk", funksjon() {
    }
   );

3. Inne i hendelsesbehandleren endrer du "src"-attributtet til det gjeldende bildet til det nylig valgte bildet. Du kan også oppdatere "alt"-attributtet:

   currentImage.src = dette.src;
   currentImage.alt = dette.alt;

4. Klikk på "index.html"-filen for å åpne den i en nettleser.
5. Velg et av miniatyrbildene for å se bildet.

Fortsett å utvide JavaScript-kunnskapen din

Uavhengig av din erfaring er det viktig å fortsette å bygge prosjekter for å utvide kunnskapen din. Fortsett å utforske andre prosjekter som å bygge et sjakkspill, kalkulator eller gjøremålsliste.