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.

Scarica v2.0.1
59 versione corrente 162 totali
Demo live Valuta sulla JED

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.