Yksinkertaisen kuvagallerian luominen HTML: n, CSS: n ja JavaScriptin avulla

Yksinkertaisen kuvagallerian luominen HTML: n, CSS: n ja JavaScriptin avulla on loistava tapa oppia verkkokehityksen perusteet. Kuvagalleriassa voit selata kuvia valitsemalla pikkukuvia suurentaaksesi verkkosivun kuvaa.

Voit luoda gallerian lisäämällä verkkosivun sisällön HTML-koodilla ja tyylin lisäämiseen CSS: llä. Voit tehdä galleriasta interaktiivisen JavaScriptin avulla, kun käyttäjä napsauttaa mitä tahansa pikkukuvaa.

Käyttöliittymän luominen kuvagallerialle

Lisää kuvagallerian käyttöliittymä HTML: n ja CSS: n avulla. Tämä sisältää suuren kuvan lisäämisen verkkosivun keskelle, joka muuttuu valitun pikkukuvan mukaan. Voit myös katsoa koko esimerkin lähdekoodi GitHubissa.

1. Luo uusi tiedosto nimeltä "index.html".
2. Lisää tähän tiedostoon HTML-koodin perusrakenne:

   html>
   <htmllang="en-US">
   <pää>
   <otsikko>kuvagalleriaotsikko>
   pää>
   <kehon>
   <divluokkaa="intro">
   <h2>kuvagalleriah2>
   <s>Valitse alta pikkukuva nähdäksesi kuvans>
   div>
   kehon>
   html>

3. Luo alikansio nimeltä "kuvat". Täytä se useilla kuvilla ja nimeä ne "kuva1.jpg" - "kuva10.jpg".
4. Lisää HTML-tiedostoon div kuvagalleriaan:

   <divid="kuvagalleria">
   div>

5. Lisää kuvagallerian div-osaan kuvatunniste näyttääksesi valitun kuvan suurennettuna. Näytä oletusarvoisesti ensimmäinen kuva "images"-kansiossa:

   <imgid="nykyinen kuva"src="images/image1.jpg"alt="Kuva 1">

6. Lisää samaan kansioon HTML-tiedostosi kanssa uusi tiedosto nimeltä "styles.css" seuraavalla CSS: llä. Voit vapaasti muokata CSS: ää lisättäväksi neumorfiset suunnittelukomponentit tai tee muita suunnittelun parannuksia käyttämällä nämä CSS-vinkit ja temput.

7. .intro { 
   tekstin tasaus: keskusta; 
   font-perhe: Arial;
   }
   h2 { 
   Fonttikoko: 36px;
   }
   s { 
   Fonttikoko: 14pt;
   }
   #kuvagalleria { 
   leveys: 600px; 
   marginaali: 0 auto;
   }
   #nykyinen kuva { 
   leveys: 100%;
   } 

8. Lisää linkki CSS-tiedostoosi HTML-tiedostosi head-tunnisteeseen:

   <linkkirel="tyylitaulukko"tyyppi="teksti/css"href="tyylit.css">

Pikkukuvien lisääminen gallerian muihin kuviin

Tällä hetkellä kuvagalleria näyttää vain ensimmäisen kuvan. Lisää valitun kuvan alle luettelo pikkukuvista. Nämä pikkukuvat näyttävät esikatselun kaikista "images"-kansiossa olevista kuvista.

1. Lisää HTML-tiedoston kuvagallerian div-kohtaan toinen div näyttääksesi muiden kuvien pikkukuvat:

   <divid="kuva peukalot">div>

2. Lisää CSS-tiedoston sisällä pikkukuvien luetteloon tyyliä:

   #kuvapeukalot { 
   näyttö: flex; 
   perustele-sisältö: keskusta; 
   marginaali yläosa: 20px;
   }

3. Lisää samaan kansioon HTML- ja CSS-tiedostojesi kanssa uusi tiedosto nimeltä "script.js".
4. Lisää linkki JavaScript-tiedostoosi HTML-tekstitunnisteen alaosaan:

   <kehon>
    Koodisi tässä 
   <käsikirjoitussrc="script.js">käsikirjoitus>
   kehon>

5. Hanki JavaScript-tiedoston sisällä HTML-elementti div: stä, joka tallentaa luettelon pikkukuvista:

   var imageThumbs = asiakirja.getElementById("kuva peukalot");

6. Lisää for-silmukka, jolla voit selata kaikkia gallerian 10 kuvaa:

   varten (var minä = 1; minä <= 10; i++) {
   }

7. Luo silmukan sisällä jokaiselle kuvalle uusi img-elementti:

   var peukalo = asiakirja.createElement("img");

8. Lisää arvot "src"- ja "alt"-attribuuteille. Tässä tapauksessa "src"-attribuutti on tiedostopolku samassa hakemistossa olevaan kuvaan "images"-kansiossa:

   thumb.src = "kuvat/kuva" + minä + ".jpg";
   thumb.alt = "kuva" + i;

9. Lisää CSS-tiedostoon uusi luokka kuvan pikkukuvan tyylistämiseksi. Voit myös lisätä muita hover- tai siirtymävaiheen CSS-tyyliä pikkukuville tee verkkosivustostasi responsiivinen ja interaktiivinen.

   .peukalo { 
   leveys: 80px; 
   korkeus: 80px; 
   esineeseen sopiva: peite; 
   marginaali-oikea: 10px; 
   kohdistin: osoitin;
   }

10. Lisää yllä oleva luokka uuteen pikkukuvaan JavaScript-tiedoston sisällä:

    thumb.classList.add("peukalo");

11. Lisää uusi pikkukuva HTML-elementtiin, joka sisältää luettelon pikkukuvista:

    imageThumbs.appendChild (peukalo);

Kuvan vaihtaminen, kun käyttäjä napsauttaa pikkukuvaa

Kun käyttäjä napsauttaa jotakin pikkukuvaa, muuta sivun keskellä oleva suurennettu kuva valituksi kuvaksi. Voit lisätä tämän toiminnon JavaScript-tiedostoon.

1. Hae JavaScript-tiedoston yläosassa valitun kuvan HTML-elementti:

   var nykyinen kuva = asiakirja.getElementById("nykyinen kuva");

2. For-silmukan sisällä lisää tapahtumakäsittelijä joka käynnistyy, kun käyttäjä valitsee minkä tahansa sivun alareunassa olevista pikkukuvista:

   thumb.addEventListener(
   "klikkaus", toiminto() {
    }
   );

3. Muuta tapahtumakäsittelijän sisällä nykyisen kuvan "src"-attribuutti äskettäin valituksi kuvaksi. Voit myös päivittää "alt"-attribuutin:

   currentImage.src = Tämä.src;
   currentImage.alt = Tämä.alt;

4. Napsauta "index.html"-tiedostoa avataksesi sen verkkoselaimessa.
5. Valitse mikä tahansa pikkukuvista nähdäksesi kuvan.

Jatka JavaScript-tietojesi laajentamista

Kokemuksestasi riippumatta on tärkeää jatkaa rakennusprojekteja tietämyksen laajentamiseksi. Jatka tutkimista muihin projekteihin, kuten shakkipelin, laskimen tai tehtävälistan rakentamiseen.