Come creare una semplice galleria di immagini utilizzando HTML, CSS e JavaScript

La creazione di una semplice galleria di immagini utilizzando HTML, CSS e JavaScript è un ottimo modo per apprendere le basi dello sviluppo web. Nella galleria immagini, potrai sfogliare le immagini selezionando le miniature per ingrandire l'immagine sulla pagina web.

Per creare la galleria, puoi utilizzare HTML per aggiungere il contenuto della pagina Web e CSS per aggiungere lo stile. Puoi utilizzare JavaScript per rendere interattiva la galleria quando l'utente fa clic su una qualsiasi delle miniature.

Come creare l'interfaccia utente per la galleria di immagini

Aggiungi l'interfaccia utente per la galleria di immagini utilizzando HTML e CSS. Ciò include l'aggiunta di un'immagine grande al centro della pagina Web, che cambierà in base alla miniatura selezionata. È inoltre possibile visualizzare l'esempio completo

1. Crea un nuovo file chiamato "index.html".
2. All'interno di questo file, aggiungi la struttura di base del codice HTML:

   html>
   <htmllang="en-US">
   <Testa>
   <titolo>galleria di immaginititolo>
   Testa>
   <corpo>
   <divclasse="introduzione">
   <h2>galleria di immaginih2>
   <P>Seleziona una miniatura qui sotto per visualizzare l'immagineP>
   div>
   corpo>
   html>

3. Crea una sottocartella chiamata "immagini". Popolalo con diverse immagini e assegna loro un nome da "image1.jpg" a "image10.jpg".
4. Nel tuo file HTML, aggiungi un div per la galleria di immagini:

   <divid="galleria di immagini">
   div>

5. All'interno del div della galleria di immagini, aggiungi un tag immagine per visualizzare l'immagine selezionata ingrandita. Per impostazione predefinita, visualizza la prima immagine all'interno della cartella "immagini":

   <immid="immagine-corrente"src="immagini/immagine1.jpg"alt="Immagine 1">

6. Nella stessa cartella del tuo file HTML, aggiungi un nuovo file chiamato "styles.css" con il seguente CSS. Sentiti libero di modificare il CSS da aggiungere componenti del disegno neumorfico o apportare altre modifiche al design utilizzando questi suggerimenti e trucchi CSS.

7. .introduzione { 
   allineamento del testo: centro; 
   famiglia di font: Aria;
   }
   h2 { 
   dimensione del font: 36px;
   }
   P { 
   dimensione del font: 14pt;
   }
   #galleria di immagini { 
   larghezza: 600px; 
   margine: 0 auto;
   }
   #immagine-corrente { 
   larghezza: 100%;
   } 

8. Aggiungi un link al tuo file CSS nel tag head del tuo file HTML:

   <collegamentorel="foglio di stile"tipo="testo/css"href="stili.css">

Come aggiungere miniature per le altre immagini nella galleria

Attualmente, la galleria di immagini mostra solo la prima immagine. Sotto l'immagine selezionata, aggiungi un elenco di miniature. Queste miniature mostreranno un'anteprima di tutte le immagini all'interno della cartella "immagini".

1. All'interno del div della galleria di immagini nel file HTML, aggiungi un altro div per visualizzare le miniature delle altre immagini:

   <divid="immagine-pollici">div>

2. All'interno del file CSS, aggiungi uno stile per l'elenco delle miniature:

   #immagine-pollici { 
   Schermo: flettere; 
   giustificare il contenuto: centro; 
   margine superiore: 20px;
   }

3. Nella stessa cartella dei file HTML e CSS, aggiungi un nuovo file chiamato "script.js".
4. Aggiungi un collegamento al tuo file JavaScript nella parte inferiore del tag body HTML:

   <corpo>
    Il tuo codice qui 
   <copionesrc="script.js">copione>
   corpo>

5. All'interno del file JavaScript, ottieni l'elemento HTML del div che memorizzerà l'elenco delle miniature:

   var immagineThumb = documento.getElementById("immagine-pollici");

6. Aggiungi un ciclo for per scorrere ciascuna delle 10 immagini nella galleria:

   per (var io = 1; io <= 10; i++) {
   }

7. All'interno del ciclo, crea un nuovo elemento img per ogni immagine:

   var pollice = documento.createElement("immagine");

8. Aggiungi valori per gli attributi "src" e "alt". In questo caso, l'attributo "src" è il percorso del file dell'immagine allo stesso indice all'interno della cartella "images":

   pollice.src = "immagini/immagine" + io + ".jpg";
   pollice.alt = "Immagine " + io;

9. All'interno del tuo file CSS, aggiungi una nuova classe per modellare la miniatura dell'immagine. Puoi anche aggiungere altri stili CSS al passaggio del mouse o di transizione per le miniature rendere il tuo sito web reattivo e interattivo.

   .pollice { 
   larghezza: 80px; 
   altezza: 80px; 
   adattamento all'oggetto: copertina; 
   margine destro: 10px; 
   cursore: puntatore;
   }

10. All'interno del file JavaScript, aggiungi la classe precedente alla nuova miniatura:

    thumb.classList.add("pollice");

11. Aggiungi la nuova miniatura all'elemento HTML che contiene l'elenco delle miniature:

    imageThumbs.appendChild (pollice);

Come modificare l'immagine quando l'utente fa clic su una miniatura

Quando l'utente fa clic su una delle miniature, cambia l'immagine ingrandita al centro della pagina nell'immagine selezionata. Puoi aggiungere questa funzionalità all'interno del file JavaScript.

1. Nella parte superiore del file JavaScript, ottieni l'elemento HTML dell'immagine attualmente selezionata:

   var immagine corrente = documento.getElementById("immagine-corrente");

2. All'interno del ciclo for, aggiungere un gestore di eventi che si attiva quando l'utente seleziona una delle miniature nella parte inferiore della pagina:

   thumb.addEventListener(
   "clic", funzione() {
    }
   );

3. All'interno del gestore dell'evento, modifica l'attributo "src" dell'immagine corrente nell'immagine appena selezionata. Puoi anche aggiornare l'attributo "alt":

   currentImage.src = Questo.src;
   currentImage.alt = Questo.alt;

4. Fare clic sul file "index.html" per aprirlo in un browser web.
5. Selezionare una delle miniature per visualizzare l'immagine.

Continua ad espandere la tua conoscenza di JavaScript

Indipendentemente dalla tua esperienza, è importante continuare a costruire progetti per ampliare le tue conoscenze. Continua a esplorare altri progetti come costruire una partita a scacchi, una calcolatrice o una lista di cose da fare.