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. Puoi anche visualizzare il codice sorgente di esempio completo su GitHub.
- Crea un nuovo file chiamato “index.html”.
- All’interno di questo file, aggiungi la struttura di base del codice HTML:
<!doctype html>
<html lang="en-US">
<head>
<title>Image Gallery</title>
</head>
<body>
<div class="intro">
<h2>Image Gallery</h2>
<p>Select a thumbnail below to view the image</p>
</div>
</body>
</html> - Crea una sottocartella chiamata “immagini”. Popolalo con diverse immagini e assegna loro un nome da “image1.jpg” a “image10.jpg”.
- Nel tuo file HTML, aggiungi un div per la galleria di immagini:
<div id="image-gallery">
</div> - 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”:
<img id="current-image" src="images/image1.jpg" alt="Image 1"> - Nella stessa cartella del tuo file HTML, aggiungi un nuovo file chiamato “styles.css” con il seguente CSS. Sentiti libero di modificare il CSS per aggiungere componenti di design neumorfici o apportare altre modifiche al design utilizzando questi suggerimenti e trucchi CSS.
-
.intro {
text-align: center;
font-family: Arial;
}h2 {
font-size: 36px;
}p {
font-size: 14pt;
}#image-gallery {
width: 600px;
margin: 0 auto;
}#current-image {
width: 100%;
} - Aggiungi un link al tuo file CSS nel tag head del tuo file HTML:
<link rel="stylesheet" type="text/css" href="styles.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”.
- All’interno del div della galleria di immagini nel file HTML, aggiungi un altro div per visualizzare le miniature delle altre immagini:
<div id="image-thumbs"></div> - All’interno del file CSS, aggiungi uno stile per l’elenco delle miniature:
#image-thumbs {
display: flex;
justify-content: center;
margin-top: 20px;
} - Nella stessa cartella dei tuoi file HTML e CSS, aggiungi un nuovo file chiamato “script.js”.
- Aggiungi un collegamento al tuo file JavaScript nella parte inferiore del tag body HTML:
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - All’interno del file JavaScript, ottieni l’elemento HTML del div che memorizzerà l’elenco delle miniature:
var imageThumbs = document.getElementById("image-thumbs"); - Aggiungi un ciclo for per scorrere ciascuna delle 10 immagini nella galleria:
for (var i = 1; i <= 10; i++) {
} - All’interno del ciclo, crea un nuovo elemento img per ogni immagine:
var thumb = document.createElement("img"); - 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”:
thumb.src = "images/image" + i + ".jpg";
thumb.alt = "Image " + i; - 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 per rendere il tuo sito Web reattivo e interattivo.
.thumb {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
} - All’interno del file JavaScript, aggiungi la classe precedente alla nuova miniatura:
thumb.classList.add("thumb"); - Aggiungi la nuova miniatura all’elemento HTML che contiene l’elenco delle miniature:
imageThumbs.appendChild(thumb);
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.
- Nella parte superiore del file JavaScript, ottieni l’elemento HTML dell’immagine attualmente selezionata:
var currentImage = document.getElementById("current-image"); - All’interno del ciclo for, aggiungi un gestore di eventi che si attiva quando l’utente seleziona una delle miniature nella parte inferiore della pagina:
thumb.addEventListener(
"click", function() {
}
); - 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 = this.src;
currentImage.alt = this.alt; - Fare clic sul file “index.html” per aprirlo in un browser web.
- 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.
Lascia un commento