Modulo interattivo per Joomla per il confronto visivo di immagini "prima e dopo". Perfetto per mostrare trasformazioni, ristrutturazioni, fotoritocco e cambiamenti storici.
Panoramica
Il modulo Image Comparison Slider consente agli utenti di confrontare visivamente due immagini trascinando un cursore (slider) tra di esse. Sviluppato tenendo a mente i moderni standard web e l'accessibilità, offre un'esperienza fluida e responsive su tutti i dispositivi.
Slider interattivo
Interfaccia di trascinamento fluida e intuitiva, con supporto touch per smartphone e tablet.
Accessibile
Navigazione completa da tastiera (frecce, Home, Fine) per una piena conformità agli standard WCAG 2.1 AAA.
Alte prestazioni
Transizioni basate su CSS3 e caricamento ritardato nativo (lazy loading) per un'ottima velocità della pagina.
In sintesi
- Confronta interattivamente le immagini "Prima" e "Dopo".
- Etichette di testo sovrapposte personalizzabili per entrambe le immagini.
- Completamente responsive, si adatta perfettamente a qualsiasi dimensione dello schermo.
- Supporto per l'orientamento dello slider sia orizzontale che verticale.
- Codice pulito e moderno, compatibile con Joomla 4, 5 e 6.
Casi d'uso ed esempi
Uno slider di confronto versatile, perfetto per evidenziare diverse trasformazioni visive.
Fotoritocco e grafica
Mostra la correzione del colore, il ritocco, l'applicazione di filtri o i miglioramenti della qualità di rendering.
Costruzioni e ristrutturazioni
Perfetto per agenzie immobiliari, interior design e costruttori per mostrare i lavori di prima e dopo.
Cambiamenti storici e geografici
Evidenzia i cambiamenti nel tempo, le foto "ieri e oggi" o le trasformazioni stagionali.
Caratteristiche principali
- Etichette personalizzabili: Aggiungi didascalie "Prima" e "Dopo" per evidenziare facilmente i due stati.
- Posizione iniziale: Imposta la posizione iniziale del cursore (es. 50% o 30%).
- Passaggio o trascinamento: Configura il metodo di interazione per spostare il cursore al clic/trascinamento o al passaggio del mouse (hover).
- Modalità verticale: Confronta le immagini scorrendo verso l'alto e verso il basso invece che a sinistra e a destra.
- Accessibile da tastiera: Pieno supporto per la navigazione con il tasto Tab e le frecce direzionali per muovere la maniglia.
- Integrazione in Joomla: Semplici parametri del modulo, facile da posizionare ovunque tramite `{loadposition}`.
Ideale per
Agenzie e Studi
Mostra progetti grafici, aggiornamenti del brand e riprogettazioni di siti web.
Bellezza e Benessere
Mostra risultati di trucco, acconciature, progressi nel fitness o trattamenti estetici.
Settore Automobilistico
Vetrina per car detailing, restauri, wrapping e tuning.
Dentisti e Cliniche
Mostra i risultati di trattamenti medici, ortodonzia e chirurgia estetica.
Installazione
Scarica
Scarica l'ultimo pacchetto del modulo (.zip) dalle release di GitHub.
Installa
Nell'amministrazione di Joomla vai su Sistema → Estensioni e carica il pacchetto.
Pubblica
Crea un nuovo modulo "Image Comparison Slider", seleziona le tue 2 immagini e assegnalo a una posizione.
Requisiti
- Joomla 4, 5 o 6.
- Versione PHP compatibile con la tua installazione di Joomla.
- Due immagini delle stesse dimensioni per ottenere i migliori risultati.
Assicurati che le immagini abbiano esattamente la stessa larghezza e altezza per evitare salti visivi quando lo slider si ridimensiona sui dispositivi mobili.
IT
EN