Seleziona la tua lingua

Image Comparison Slider - Cover

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.

Image Comparison - Fotoritocco
Fotoritocco e grafica

Mostra la correzione del colore, il ritocco, l'applicazione di filtri o i miglioramenti della qualità di rendering.

Image Comparison - Costruzioni e ristrutturazioni
Costruzioni e ristrutturazioni

Perfetto per agenzie immobiliari, interior design e costruttori per mostrare i lavori di prima e dopo.

Image Comparison - Cambiamenti storici
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.