Supporto volontario e collaborativo per Joomla!® in italiano

Uno slider responsive per Joomla: OS Touch Slider

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Gli slider servono per visualizzare una successione di foto sul proprio sito che cambiano tra di loro con speciali effetti, dando così un po' di movimento e rendendo più gradevoli le pagine del sito. Sono disponibili numerose estensioni per inserire uno slider su Joomla e tra le tante ho trovato OS Touch Slider, un modulo responsive che ha la particolarità di essere impostato direttamente da frontend, vediamo come....

Questa è la scheda presente nella JED: https://extensions.joomla.org/extension/os-touch-slider
Questa la demo presente nel sito dello sviluppatore: http://ordasvit.com/os-slider-joomla-responsive-slideshow/

Il pacchetto installa:
- il plugin Ajax Os TouchSlider
- il modulo OS Touch Slider

Una volta installato andiamo a pubblicare il modulo OS Touch Slider in una posizione del template utilizzato.
Guardando ora in frontend vedremo solo un riquadro bianco con delle frecce, ovviamente è vuoto in quanto non abbiamo ancora caricato alcuna immagine. Effettuiamo quindi il login lato sito e vedremo apparire un'iconcina al passaggio del mouse sopra al modulo:



Clicchiamo sull'iconcina e apparirà il pannello di strumenti per personalizzare lo slider. Questo pannello si può trascinare dove più ci è comodo:




Come indicato, trasciniamo all'interno del pannello, sopra alla scritta UPLOAD IMAGE, le immagini che vogliamo inserire nello slider.
Consiglio di calcolare prima la larghezza che lo slideshow avrà nel sito in pixel visto nelle sue reali dimensioni, cioè da un desktop, e ridimensionare le immagini a questa larghezza individuata prima di caricarle. Utilizzare la stessa identica altezza per tutte le immagini. Poi di seguito impostare le dimensioni dello slider in pixel sempre con la stessa larghezza e altezza (vedi sotto impostazioni General).






Clicchiamo sul pulsante Save per vedere il risultato:




Riapriamo il pannello e andiamo a modificare una delle due immagini:




Come vedete cliccando sul pulsante Add text è possibile inserire del testo che si andrà a sovrapporre all'immagine:



Nota: se volete spostare il testo, andate con il mouse sopra al testo che si vede sopra all'immagine e trascinatelo direttamente nella posizione desiderata. Si possono inserire più blocchi di testo per immagine.

Durante la modifica del testo possiamo impostare la grandezza, il tipo di font (5 nella versione gratuita), il colore, bordo e attribuire una classe css personalizzata.

Possiamo anche inserire al posto del testo dei video di Vimeo o Youtube, basta copiare il codice dell'iframe al posto del testo.

Andiamo ora a vedere il tab General:





Tra i parametri disponibili troviamo Width, px e Height, px, possiamo quindi impostare l'ampiezza (es. 700px) e l'altezza dell'immagine. Selezionando Height auto, l'altezza si aggiusterà automaticamente, ma consiglio di impostarla in pixel.
Il parametro Slider direction ci consente di decidere se far scorrere le immagini verticalmente od orizzontalmente.

I parametri del tab Advanced sono utilizzabili solo nella versione commerciale, mentre nel tab Animation troviamo la velocità dello slide e il tipo di slide. Nella versione gratuita sono disponibili solo 5 tipi di slider, gli altri sono per la versione PRO.

Durante la stesura dell'articolo sono stati utilizzati Joomla 3 con template Protostar e OS Touch Slider 1.0.2

 

CommentaCommenta questo articolo sul forum

Calendario articoli

Gennaio 2017
Lun Mar Mer Gio Ven Sab Dom
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Ultima versione di Joomla!®

downloadVer. 3.6.5 Stabile Italiana
Data di rilascio:14 Dicembre 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: