Image Sliding – jQuery Plugin
by maxk • 21 settembre 2013 • jQuery • 2 Commenti
Uno slider completo e personalizzabile.
Il plugin per jQuery imageSliding v1.0, permette di inserire molteplici gallerie di immagini con effetto slide automatico/manuale, caption con del testo a piacimento (sfrutta il title dell’immagine), scorrimento sia verso destra che verso sinistra. Il tutto pienamente personalizzabile.
Per utilizzare il plugin, basta semplicemente seguire i seguenti passi:
1) Scaricare il plugin in formato ZIP
Basta scaricare il plugin dal seguente link imageSliding v1.0.
All’interno del file ZIP è presente, oltre che al file di plugin in formato JS, anche una struttura già funzionante da provare. L’effetto è quello che potete vedere collegandovi al seguente link: DEMO di imageSliding.
2) Copiare e richiamare il file JS
Copiate il file jquery.imageSliding.min.js nella vostra cartella degli script; poi inserire nella vostra pagina HTML i richiami al file e a jQuery, come nell’esempio seguente:
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type='text/javascript' src='percorso/al/file/jquery.imageSliding.min.js'></script>
</head>
Ho sottinteso che la libreria jQuery la includiate dalla repository di Google. Se invece avete un file locale al vostro sito, la includete come per il file di plugin.
3) Inserire la vostra galleria nella pagina
L’inserimento della galleria nella pagina è semplicissimo, già guardando il file di esempio capirete come funziona. Comunque, basta creare un contenitore (meglio se un DIV) al cui interno inserirete tutti i riferimenti alle immagini che volete far visualizzare:
<div id='slideshow'> <img src='percorso/alle/immagini/1.jpg' alt='Test photo' title='Test photo number 1' /> <img src='percorso/alle/immagini/2.jpg' alt='Test photo' title='Test photo number 2' /> <img src='percorso/alle/immagini/3.jpg' alt='Test photo' title='Test photo number 3' /> <img src='percorso/alle/immagini/4.jpg' alt='Test photo' title='Test photo number 4' /> </div>
Come parametro ID assegnato al DIV può essere usato qualsiasi nome voi vogliate; lo stesso nome servirà per attivare il plugin sulla serie di immagini contenute.
Come era stato detto all’inizio, il parametro title viene utilizzato per il caption (se volete utilizzare la funzione).
L’unica impostazione CSS da utilizzare è per definire la dimensione del contenitore per le immagini, come da esempio:
#slideshow { width: 393px; height: 480px; }
Naturalmente potete aggiungere qualsiasi altro attributo di stile che vi serva per inglobare il contenitore nel vostro sito.
4) Attivare il plugin
Per attivare il plugin e farlo funzionare correttamente, dovete aggiungere un codice Javascript alla pagina o direttamente inline (nel codice sorgente), oppure in uno script esterno da includere.
In ogni modo, la funzionalità di attivazione del plugin non cambia:
$("#slideshow").imageSliding();
Come avrete notato, ho richiamato l’attributo ID che avevo usato nel DIV sopra. Se avete usato un ID di nome diverso, dovrete usare quello.
Il plugin, a questo punto, è perfettamente funzionante con i parametri preimpostati (default) che sono:
- showtime (millisecondi) – Tempo di visualizzazione per ogni immagine (d. 3000)
- loading (testo) – Testo visualizzato durante il preloading delle immagini (d. Loading images…)
- slidetime (millisecondi) – Tempo di durata dell’effetto slide (d. 3000)
- direction (string) – Direzione dello slide – left / right – (d. right)
- over (booleano) – Attiva/Disattiva eventi sul passaggio del mouse (d. true)
- caption (booleano) – Attiva/Disattiva il caption (d. false)
- captioncss (oggetto) – Personalizzazione degli stili per il caption (d. vedi più sotto)
- captionanimate (booleano) – Animazione del contenitore caption (d. false)
- move (booleano) – Attiva/Disattiva la selezione manuale delle immagini (d. false)
- movecss (oggetto) – Personalizza gli stili della selezione manuale (d. vedi più sotto)
- thumb (booleano) – Visualizza le miniature sulla selezione manuale (d. true)
Se volete variare i valori di default del plugin basta semplicemente assegnare il nuovo valore in fase di attivazione del plugin, in qualsiasi ordine:
$("#slideshow").imageSliding({
loading: "Caricamento immagini..."
, over: false
, move: true
, caption: true
});
5) Uso del caption
Se avete necessità di utilizzare il caption dovete attivarlo utilizzando la procedura suddetta, dopo di ché potete personalizzarlo utilizzando i seguenti CSS da passare al plugin sotto forma di oggetto:
- height – Altezza del contenitore
- color – Colore del font
- font – Dimensione e tipo di font
- marginTop – Distanza dal bordo superiore del contenitore immagini
- background – Colore di sfondo del contenitore
- opacity – Trasparenza
- padding – Padding del testo
- align – Allineamento del testo
Nell’esempio sucessivo vediamo come vengono implementati i parametri CSS del caption. I valori che vedete associati corrispondono ai valori di default:
$("#slideshow").imageFading({
caption: true
, captioncss: {
height: 20
, color: "#fff"
, font: "10px Helvetica"
, background: "#000"
, opacity: 0.7
, padding: 5
, align: "left"
}
});
Come avrete notato marginTop non è stato inserito in quanto per default la posizione del caption è nella parte inferiore del contenitore delle immagini e viene calcolato in modo automatico.
6) Uso della selezione manuale “move”
Questa possibilità è in aggiunta allo scroll automatico, quindi se l’attivate funzioneranno entrambe.
Ecco come personalizzare la barra di selezione manuale utilizzando i seguenti CSS da passare al plugin sotto forma di oggetto:
- image – E’ la URL dell’immagine di selezione delle slide – d. “./imgs/icons/img_dsp.png”
- imageSel – E’ l’immagine una volta selezionata la slide (evidenziata) – d. “./imgs/icons/img_sel.png”
- marginTop – Distanza dal bordo superiore del contenitore immagini – d. *impostato automaticamente*
Le immagini per la selezione delle slide sono già incluse nel pacchetto ZIP del plugin, ma potete decidere di usarne delle vostre o cambiare percorso a quelle di default; la personalizzazione è tutta vostra!
Il marginTop viene impostato automaticamente a fondo slide o subito sopra della barra caption se attivato. Variando questo parametro, potete anche posizionarlo in cima alla slide o dove meglio preferite.
Nell’esempio successivo vediamo come implementare i CSS per l’opzione move:
$("#slideshow").imageSliding({
move: true
, movecss: {
height: 20
, image: "/immagini/slider/immagine.png"
, imageSel: "/immagini/slider/immagine-selezionata.png"
}
});
Per qualsiasi problema o suggerimento, potete lasciare un commento a questo articolo oppure scrivermi utilizzando la pagina dei contatti.
