IT 
EN Image Comparison Slider è un modulo Joomla che permette di confrontare due immagini con un’interfaccia interattiva prima/dopo. È pensato per mostrare trasformazioni, miglioramenti visivi, confronti fotografici e variazioni nel tempo in modo chiaro e coinvolgente.
Panoramica
Image Comparison Slider consente di presentare due immagini sovrapposte con un cursore trascinabile che rende immediato il confronto visivo tra uno stato “before” e uno “after”.
Il modulo è adatto a siti che devono mostrare differenze in modo visivo, come ristrutturazioni, ritocco fotografico, portfolio di design, confronti storici o variazioni di qualità grafica, ed è progettato per offrire un’esperienza responsive e accessibile.
Confronto interattivo
Un cursore trascinabile permette di confrontare due immagini in modo immediato e intuitivo.
Responsive
Funziona su desktop, tablet e smartphone con supporto per interazioni touch.
Accessibile
Il modulo è progettato con attenzione ad accessibilità, tastiera, ARIA e preferenze di movimento ridotto.
Requisiti
Image Comparison Slider è distribuito come modulo Joomla gratuito e la scheda pubblica lo indica compatibile con Joomla 4, 5 e 6. Il progetto GitHub lo presenta come modulo JoomlaLABS per confronti immagine prima/dopo sul sito.
| Requisito | Dettaglio | Note |
|---|---|---|
| Joomla | Joomla 4, 5 e 6 | La compatibilità indicata nella scheda JED copre i rami attuali del CMS. |
| Tipo estensione | Modulo | L’estensione è distribuita come modulo Joomla. |
| JavaScript | Vanilla JavaScript ES6+ | Il progetto dichiara un’architettura moderna senza dipendenze jQuery. |
| Immagini | Due immagini ben coordinate | Il confronto rende al meglio quando le immagini hanno soggetto, formato e inquadratura coerenti. |
Perfetto per
- Prima e dopo ristrutturazioni
- Confronti fotografici
- Portfolio design
- Immagini storiche allora/oggi
- Confronti tecnici o grafici
Installazione
- Scarica il pacchetto del modulo dal repository GitHub o dalla tua sorgente di distribuzione.
- Apri Joomla amministrazione e vai in Sistema → Estensioni → Installa.
- Carica il pacchetto e attendi la conferma di installazione.
- Crea o modifica il modulo dalla gestione moduli.
- Configura le due immagini, i testi e la posizione del modulo nel template.
Cosa prepara il modulo
Dopo l’installazione, il modulo permette di creare un confronto visuale tra due immagini mediante un controllo trascinabile, mantenendo un comportamento moderno, leggero e orientato alle prestazioni.
- Due immagini da confrontare.
- Etichette opzionali per “prima” e “dopo”.
- Interazione drag, touch e tastiera.
- Resa responsive su layout diversi.
Configurazione
La configurazione del modulo ruota attorno alla preparazione corretta delle due immagini e delle etichette di contesto. Una buona configurazione garantisce che il confronto sia chiaro, leggibile e davvero utile per l’utente.
Immagine iniziale e finale
Usa immagini coerenti per soggetto, proporzioni e inquadratura, altrimenti il confronto risulterà meno efficace.
Etichette
Le caption o label opzionali aiutano a identificare chiaramente il significato delle due immagini.
Contesto di utilizzo
Il modulo funziona bene in pagine portfolio, landing page, schede progetto o contenuti editoriali che richiedono confronti visivi.
Buona pratica
- Usa immagini della stessa dimensione o proporzione.
- Evita differenze di crop troppo marcate.
- Mantieni etichette brevi e leggibili.
- Verifica sempre il comportamento su mobile.
- Inserisci il modulo in aree con spazio visivo sufficiente.
Funzionalità
La scheda pubblica dell’estensione mette in evidenza un set di funzionalità moderne focalizzate su esperienza utente, accessibilità e prestazioni.
Slider trascinabile
Interfaccia drag fluida e intuitiva per confrontare visivamente due immagini.
Touch-friendly
Supporto completo per dispositivi mobile e tablet.
Lazy loading
Le immagini vengono caricate quando necessario per migliorare la performance della pagina.
Animazioni fluide
L’estensione usa transizioni CSS3 e osservatori moderni per una resa più efficiente.
Accessibilità
L’accessibilità è uno dei punti forti dichiarati del modulo, che viene presentato come conforme WCAG 2.1 AAA e pronto per tastiera, screen reader e gestione del focus.
Navigazione da tastiera
Supporta frecce direzionali e tasti Home/End per controllare il cursore anche senza mouse.
Compatibilità screen reader
La presenza di attributi ARIA migliora l’interazione con tecnologie assistive.
Focus visibile
Il modulo include una gestione del focus pensata per un utilizzo più chiaro e controllabile.
Reduced motion
Rispetta le preferenze utente legate alla riduzione delle animazioni.
Tecnologia moderna
- Zero jQuery.
- JavaScript ES6+ nativo.
- Web Asset Manager.
- Codice conforme PSR-12.
- Ottimizzazioni tramite IntersectionObserver e ResizeObserver.
Casi d’uso
- Mostrare un prima/dopo in ambito edilizio o di ristrutturazione.
- Mettere a confronto una foto originale e una modificata.
- Presentare differenze in un portfolio grafico o fotografico.
- Visualizzare immagini storiche confrontate con la situazione attuale.
- Evidenziare miglioramenti tecnici o qualitativi tra due versioni.
- Rendere più immediata la lettura visiva di una trasformazione significativa.
Perché usarlo
Quando il cambiamento è visivo, un confronto prima/dopo racconta molto meglio di una descrizione testuale. Il modulo nasce proprio per trasformare quella differenza in un’interazione chiara, immediata e accessibile.
Risoluzione problemi
Il confronto non appare correttamente
Controlla che entrambe le immagini siano valorizzate e che il modulo sia pubblicato nella posizione corretta.
Le immagini risultano disallineate
Usa immagini con proporzioni e inquadrature coerenti per ottenere un confronto più pulito.
Su mobile l’esperienza è scomoda
Verifica la larghezza del contenitore, lo spazio disponibile e la qualità delle immagini su schermi piccoli.
Il modulo sembra troppo pesante
Ottimizza il peso delle immagini prima del caricamento, anche se il modulo supporta lazy loading.
Il focus o la tastiera non sembrano evidenti
Verifica eventuali override CSS del template che possono interferire con gli stili di accessibilità.
Il layout è troppo stretto
Inserisci il modulo in un contenitore con sufficiente larghezza, così il cursore e le immagini restano leggibili.