Kako ustvariti preprosto galerijo slik z uporabo HTML, CSS in JavaScript

Ustvarjanje preproste galerije slik z uporabo HTML, CSS in JavaScript je odličen način za učenje osnov spletnega razvoja. V galeriji slik boste lahko listali med slikami z izbiro sličic za povečavo slike na spletni strani.

Če želite ustvariti galerijo, lahko uporabite HTML za dodajanje vsebine spletne strani in CSS za dodajanje sloga. S pomočjo JavaScripta lahko naredite galerijo interaktivno, ko uporabnik klikne katero koli sličico.

Kako ustvariti uporabniški vmesnik za galerijo slik

Dodajte uporabniški vmesnik za galerijo slik z uporabo HTML in CSS. To vključuje dodajanje velike slike na sredino spletne strani, ki se bo spreminjala glede na izbrano sličico. Ogledate si lahko tudi celoten primer izvorna koda na GitHubu.

1. Ustvarite novo datoteko z imenom "index.html".
2. V to datoteko dodajte osnovno strukturo kode HTML:

   html>
   <htmljezik="en-US">
   <glavo>
   <naslov>Galerija sliknaslov>
   glavo>
   <telo>
   <divrazred="uvod">
   <h2>Galerija slikh2>
   <str>Za ogled slike izberite spodnjo sličicostr>
   div>
   telo>
   html>

3. Ustvarite podmapo z imenom "slike". Napolnite ga z več slikami in jih poimenujte od "image1.jpg" do "image10.jpg".
4. V datoteko HTML dodajte div za galerijo slik:

   <divid="galerija slik">
   div>

5. Znotraj div galerije slik dodajte slikovno oznako za prikaz povečane izbrane slike. Privzeto prikaži prvo sliko znotraj mape "slike":

   <imgid="trenutna slika"src="images/image1.jpg"alt="Slika 1">

6. V isto mapo kot vaša datoteka HTML dodajte novo datoteko z imenom "styles.css" z naslednjim CSS. Prosto spremenite CSS in ga dodajte nevmorfne konstrukcijske komponente ali naredite druge prilagoditve oblikovanja z uporabo te nasvete in trike CSS.

7. .uvod { 
   poravnava besedila: center; 
   družina pisav: Arial;
   }
   h2 { 
   velikost pisave: 36px;
   }
   str { 
   velikost pisave: 14točka;
   }
   #galerija-slik { 
   premer: 600px; 
   marža: 0 avto;
   }
   #trenutna slika { 
   premer: 100%;
   } 

8. Dodajte povezavo do vaše datoteke CSS v oznaki head vaše datoteke HTML:

   <povezavarel="stylesheet"vrsta="besedilo/css"href="styles.css">

Kako dodati sličice za druge slike v galeriji

Trenutno je v galeriji slik prikazana samo prva slika. Pod izbrano sliko dodajte seznam sličic. Te sličice bodo prikazale predogled vseh slik v mapi »slike«.

1. Znotraj div galerije slik v datoteki HTML dodajte še en div za prikaz sličic za druge slike:

   <divid="slike-palci">div>

2. Znotraj datoteke CSS dodajte nekaj sloga za seznam sličic:

   #image-thumbs { 
   zaslon: flex; 
   justify-content: center; 
   margin-top: 20px;
   }

3. V isto mapo kot datoteke HTML in CSS dodajte novo datoteko z imenom »script.js«.
4. Dodajte povezavo do svoje datoteke JavaScript na dnu oznake telesa HTML:

   <telo>
    Vaša koda tukaj 
   <scenarijsrc="script.js">scenarij>
   telo>

5. Znotraj datoteke JavaScript pridobite element HTML diva, ki bo shranil seznam sličic:

   var imageTumbs = dokument.getElementById("slike-palci");

6. Dodajte for-loop, da se pomikate po vsaki od 10 slik v galeriji:

   za (var jaz = 1; jaz <= 10; i++) {
   }

7. Znotraj zanke ustvarite nov element img za vsako sliko:

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

8. Dodajte vrednosti za atributa "src" in "alt". V tem primeru je atribut "src" pot datoteke do slike z istim indeksom znotraj mape "images":

   thumb.src = "slike/slika" + jaz + ".jpg";
   thumb.alt = "Slika" + i;

9. Znotraj datoteke CSS dodajte nov razred za oblikovanje sličice slike. Za sličice lahko dodate tudi drug lebdeč ali prehodni slog CSS naredite svojo spletno stran odzivno in interaktivno.

   .palec { 
   premer: 80px; 
   višina: 80px; 
   prileganje objektu: pokrov; 
   margin-desno: 10px; 
   kazalec: kazalec;
   }

10. Znotraj datoteke JavaScript dodajte zgornji razred novi sličici:

    thumb.classList.add("palec");

11. Dodajte novo sličico elementu HTML, ki vsebuje seznam sličic:

    imageThumbs.appendChild (palec);

Kako spremeniti sliko, ko uporabnik klikne sličico

Ko uporabnik klikne eno od sličic, spremeni povečano sliko na sredini strani v izbrano sliko. To funkcijo lahko dodate znotraj datoteke JavaScript.

1. Na vrhu datoteke JavaScript pridobite element HTML trenutno izbrane slike:

   var trenutna slika = dokument.getElementById("trenutna slika");

2. Znotraj zanke for, dodajte obravnavo dogodkov ki se sproži, ko uporabnik izbere katero koli sličico na dnu strani:

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

3. Znotraj obdelovalnika dogodkov spremenite atribut "src" trenutne slike v novo izbrano sliko. Prav tako lahko posodobite atribut "alt":

   currentImage.src = to.src;
   trenutna slika.alt = to.alt;

4. Kliknite datoteko "index.html", da jo odprete v spletnem brskalniku.
5. Za ogled slike izberite katero koli od sličic.

Še naprej širite svoje znanje o JavaScriptu

Ne glede na vaše izkušnje je pomembno, da še naprej gradite projekte, da razširite svoje znanje. Nadaljujte z raziskovanjem drugih projektov, kot je izdelava šahovske igre, kalkulatorja ali seznama opravil.