Introduzione
Una galleria multimediale permette di presentare immagini, registrazioni audio e video all’interno della stessa interfaccia. È una soluzione utile per portfolio, cataloghi, documentazione tecnica, siti di eventi e pagine dedicate a prodotti digitali.
In questo tutorial realizzeremo una galleria composta da miniature e da un’area di visualizzazione principale. L’utente potrà scegliere un contenuto e aprirlo in una finestra modale usando l’elemento HTML <dialog>. In questo modo eviteremo di creare manualmente una struttura complessa con livelli sovrapposti e potremo mantenere il codice più semantico.
L’esempio utilizza HTML per la struttura e un piccolo script JavaScript per cambiare il contenuto visualizzato. Il markup resta comunque il punto centrale: immagini, audio e video sono elementi nativi del browser e non richiedono librerie esterne.
Codice completo
<section class="media-gallery" aria-labelledby="gallery-title">
<h2 id="gallery-title">Diario di viaggio</h2>
<div class="media-grid">
<button
type="button"
class="media-card"
data-type="image"
data-src="media/montagna.jpg"
data-title="Paesaggio di montagna"
data-description="Una vista panoramica sulle montagne al tramonto">
<img
src="media/montagna-thumb.jpg"
alt="Montagne illuminate dalla luce del tramonto"
width="240"
height="160">
<span>Fotografia</span>
</button>
<button
type="button"
class="media-card"
data-type="audio"
data-src="media/vento.mp3"
data-title="Suono del vento"
data-description="Registrazione ambientale effettuata in alta quota">
<img
src="media/audio-thumb.jpg"
alt="Microfono utilizzato per una registrazione ambientale"
width="240"
height="160">
<span>Audio</span>
</button>
<button
type="button"
class="media-card"
data-type="video"
data-src="media/escursione.mp4"
data-title="Escursione nel bosco"
data-description="Breve video girato durante un’escursione">
<img
src="media/video-thumb.jpg"
alt="Anteprima di un video girato in un bosco"
width="240"
height="160">
<span>Video</span>
</button>
</div>
<dialog id="media-dialog" aria-labelledby="dialog-title">
<button
type="button"
id="close-dialog"
aria-label="Chiudi contenuto multimediale">
Chiudi
</button>
<h3 id="dialog-title"></h3>
<div id="dialog-content"></div>
<p id="dialog-description"></p>
</dialog>
</section>
<script>
const cards = document.querySelectorAll(".media-card");
const dialog = document.querySelector("#media-dialog");
const content = document.querySelector("#dialog-content");
const title = document.querySelector("#dialog-title");
const description = document.querySelector("#dialog-description");
const closeButton = document.querySelector("#close-dialog");
cards.forEach((card) => {
card.addEventListener("click", () => {
const type = card.dataset.type;
const source = card.dataset.src;
title.textContent = card.dataset.title;
description.textContent = card.dataset.description;
content.replaceChildren();
let mediaElement;
if (type === "image") {
mediaElement = document.createElement("img");
mediaElement.src = source;
mediaElement.alt = card.dataset.title;
mediaElement.width = 800;
mediaElement.height = 533;
}
if (type === "audio") {
mediaElement = document.createElement("audio");
mediaElement.src = source;
mediaElement.controls = true;
}
if (type === "video") {
mediaElement = document.createElement("video");
mediaElement.src = source;
mediaElement.controls = true;
mediaElement.width = 800;
mediaElement.height = 450;
}
content.append(mediaElement);
dialog.showModal();
});
});
closeButton.addEventListener("click", () => {
dialog.close();
});
dialog.addEventListener("close", () => {
content.replaceChildren();
});
</script>Spiegazione
Struttura della galleria
L’elemento <section> raggruppa tutti i contenuti collegati alla galleria. L’attributo aria-labelledby collega la sezione al titolo, migliorando la comprensione della struttura da parte delle tecnologie assistive.
Ogni contenuto è rappresentato da un elemento <button>. Questa scelta è preferibile rispetto a un semplice <div> perché il pulsante è già interattivo, può ricevere il focus da tastiera e reagisce naturalmente al tasto Invio o alla barra spaziatrice.
Gli attributi data-type, data-src, data-title e data-description conservano le informazioni necessarie per costruire la finestra modale. Gli attributi personalizzati data-* sono adatti a questo scopo perché permettono di associare dati all’elemento senza introdurre attributi HTML non validi.
Uso di dialog
L’elemento <dialog> rappresenta una finestra di dialogo nativa. Il metodo showModal() la apre in modalità modale, impedendo normalmente l’interazione con il resto della pagina finché l’utente non la chiude.
Il metodo close() chiude la finestra. Quando viene chiusa, lo script elimina il contenuto multimediale con replaceChildren(). Questa operazione è utile soprattutto per audio e video: interrompe la riproduzione e libera il riferimento all’elemento precedente.
Creazione dinamica del media
Lo script controlla il valore di data-type. Se il valore è image, crea un elemento <img>; se è audio, crea un elemento <audio>; se è video, crea un elemento <video>.
La proprietà controls aggiunge i comandi nativi di riproduzione. Non vengono costruiti controlli personalizzati inutilmente: quelli del browser sono generalmente più affidabili e già compatibili con tastiera e tecnologie assistive.
Best practice
- Usa immagini in miniatura realmente più leggere rispetto ai file originali, invece di ridimensionare soltanto tramite CSS.
- Fornisci sempre un testo alt descrittivo per le immagini. Se un’immagine è puramente decorativa, usa alt="".
- Imposta width e height sulle immagini per ridurre gli spostamenti visivi durante il caricamento.
- Utilizza pulsanti veri per gli elementi selezionabili, evitando di simulare l’interazione con div e gestori di eventi non necessari.
- Non avviare automaticamente audio o video: la riproduzione inattesa può disturbare l’utente e creare problemi di accessibilità.
- Chiudi la finestra quando l’utente preme il pulsante dedicato. Il comportamento nativo di dialog gestisce anche il tasto Esc nei browser moderni.
- Descrivi il contenuto nella didascalia della finestra, non affidarti solo al nome del file.
- Per progetti reali, aggiungi anche la gestione degli errori di caricamento e messaggi comprensibili quando un file non è disponibile.
Riepilogo
Una galleria multimediale può essere costruita con pochi elementi HTML ben scelti: section per raggruppare i contenuti, button per l’interazione, img, audio e video per i media e dialog per la visualizzazione in primo piano.
L’uso degli attributi data-* consente di mantenere separati contenuto e comportamento, mentre JavaScript si limita a creare l’elemento appropriato e ad aprire la finestra. Il risultato è una base estendibile, semantica e adatta a molti casi pratici.