Cum să creați o galerie de imagini simplă folosind HTML, CSS și JavaScript

Crearea unei simple galerii de imagini folosind HTML, CSS și JavaScript este o modalitate excelentă de a învăța elementele de bază ale dezvoltării web. În galeria de imagini, veți putea parcurge imagini selectând miniaturi pentru a mări imaginea de pe pagina web.

Pentru a crea galeria, puteți folosi HTML pentru a adăuga conținutul paginii web și CSS pentru a adăuga stilul. Puteți utiliza JavaScript pentru a face galeria interactivă atunci când utilizatorul face clic pe oricare dintre miniaturi.

Cum se creează interfața de utilizare pentru Galeria de imagini

Adăugați interfața de utilizare pentru galeria de imagini folosind HTML și CSS. Aceasta include adăugarea unei imagini mari în centrul paginii web, care se va modifica în funcție de miniatura selectată. De asemenea, puteți vizualiza exemplul complet

1. Creați un fișier nou numit „index.html”.
2. În acest fișier, adăugați structura codului HTML de bază:

   html>
   <htmllang="en-US">
   <cap>
   <titlu>Galerie de imaginititlu>
   cap>
   <corp>
   <divclasă="intro">
   <h2>Galerie de imaginih2>
   <p>Selectați o miniatură de mai jos pentru a vizualiza imagineap>
   div>
   corp>
   html>

3. Creați un subdosar numit „imagini”. Populați-l cu mai multe imagini și denumiți-le de la „image1.jpg” la „image10.jpg”.
4. În fișierul HTML, adăugați un div pentru galeria de imagini:

   <divid="Galerie de imagini">
   div>

5. În interiorul galeriei de imagini div, adăugați o etichetă de imagine pentru a afișa imaginea selectată mărită. În mod implicit, afișați prima imagine în dosarul „imagini”:

   <imgid="imaginea curenta"src=„imagini/imagine1.jpg”alt=„Imaginea 1”>

6. În același dosar cu fișierul HTML, adăugați un fișier nou numit „styles.css” cu următorul CSS. Simțiți-vă liber să modificați CSS-ul pentru a adăuga componente de design neumorf sau faceți alte ajustări de design folosind aceste sfaturi și trucuri CSS.

7. .intro { 
   aliniere text: centru; 
   familie de fonturi: Arial;
   }
   h2 { 
   marimea fontului: 36px;
   }
   p { 
   marimea fontului: 14pct;
   }
   #Galerie de imagini { 
   lăţime: 600px; 
   marginea: 0 auto;
   }
   #imaginea-actuală { 
   lăţime: 100%;
   } 

8. Adăugați un link către fișierul dvs. CSS în eticheta head a fișierului HTML:

   <legăturărel="foaia de stil"tip=„text/css”href=„styles.css”>

Cum să adăugați miniaturi pentru celelalte imagini din Galerie

În prezent, galeria de imagini afișează doar prima imagine. Sub imaginea selectată, adăugați o listă de miniaturi. Aceste miniaturi vor afișa o previzualizare a tuturor imaginilor din folderul „imagini”.

1. În interiorul div-ului galeriei de imagini din fișierul HTML, adăugați un alt div pentru a afișa miniaturi pentru celelalte imagini:

   <divid="imagine-degetele mari">div>

2. În interiorul fișierului CSS, adăugați un stil pentru lista de miniaturi:

   #imagine-degetele mari { 
   afişa: contracta; 
   justifica-conținut: centru; 
   margine-top: 20px;
   }

3. În același folder cu fișierele HTML și CSS, adăugați un fișier nou numit „script.js”.
4. Adăugați un link către fișierul JavaScript în partea de jos a etichetei HTML body:

   <corp>
    Codul dvs. aici 
   <scenariusrc=„script.js”>scenariu>
   corp>

5. În interiorul fișierului JavaScript, obțineți elementul HTML al div-ului care va stoca lista de miniaturi:

   var ImageThumbs = document.getElementById("imagine-degetele mari");

6. Adăugați o buclă pentru a parcurge fiecare dintre cele 10 imagini din galerie:

   pentru (var i = 1; eu <= 10; i++) {
   }

7. În interiorul buclei, creați un nou element img pentru fiecare imagine:

   var degetul mare = document.createElement("img");

8. Adăugați valori pentru atributele „src” și „alt”. În acest caz, atributul „src” este calea fișierului către imagine la același index din dosarul „imagini”:

   thumb.src = "imagini/imagine" + i + „.jpg”;
   degetul mare.alt = "Imagine " + i;

9. În interiorul fișierului dvs. CSS, adăugați o nouă clasă pentru a stila miniatura imaginii. De asemenea, puteți adăuga un alt stil CSS de trecere sau tranziție pentru miniaturi faceți site-ul dvs. receptiv și interactiv.

   .deget mare { 
   lăţime: 80px; 
   înălţime: 80px; 
   potrivire obiect: acoperi; 
   margine-dreapta: 10px; 
   cursor: indicator;
   }

10. În interiorul fișierului JavaScript, adăugați clasa de mai sus la noua miniatură:

    thumb.classList.add("deget mare");

11. Adăugați noua miniatură la elementul HTML care conține lista de miniaturi:

    imageThumbs.appendChild (degetul mare);

Cum se schimbă imaginea când utilizatorul face clic pe o miniatură

Când utilizatorul face clic pe una dintre miniaturi, schimbați imaginea mărită din centrul paginii cu imaginea selectată. Puteți adăuga această funcționalitate în fișierul JavaScript.

1. În partea de sus a fișierului JavaScript, obțineți elementul HTML al imaginii selectate în prezent:

   var currentImage = document.getElementById("imaginea curenta");

2. În interiorul buclei for, adăugați un handler de evenimente care se declanșează atunci când utilizatorul selectează oricare dintre miniaturile din partea de jos a paginii:

   thumb.addEventListener(
   "clic", funcţie() {
    }
   );

3. În interiorul handler-ului de evenimente, schimbați atributul „src” al imaginii curente la noua imagine selectată. De asemenea, puteți actualiza atributul „alt”:

   currentImage.src = acest.src;
   currentImage.alt = acest.alt;

4. Faceți clic pe fișierul „index.html” pentru a-l deschide într-un browser web.
5. Selectați oricare dintre miniaturi pentru a vizualiza imaginea.

Continuați să vă extindeți cunoștințele JavaScript

Indiferent de experiența dvs., este important să continuați să construiți proiecte pentru a vă extinde cunoștințele. Continuați să explorați alte proiecte, cum ar fi construirea unui joc de șah, a unui calculator sau a unei liste de sarcini.