Appuntamento con i tutorial su jquery, dove andremo a vedere uno bellissimo slideshow di foto dove potrai realizzare effetti di transizione davvero originali.
Ecco subito l’esempio che andremo a realizzare, grazie al plugin jqFancyTransitions.
Andiamo a vedere come ottenere questo effetto
Passo preliminare
Scarica gli script necessari: jQuery e jqFancyTransitions
Passo 1. Inizializzazione dello script
Tra i tag head inserisci le righe di codice necessarie per inizializzare lo script.
Passo 2. Inserisci le immagini
Inserisci il codice HTML necessario, per inserire le immagini, possibilmente tutte della stessa dimensione.
Passo 3. Applichiamo lo script
Ora non ti resta che applicare lo script al div che hai appena creato, richiamando la funzione jqFancyTransition., subito dopo il div che hai inserito al punto 2.
Passo 4. Personalizzazione degli effetti
Questo passo è opzionale, ma ti permette di sfruttare al massimo lo script.
- effect: ”, // puoi scegliere tra wave, zipper, curtain
- width: 500, // larghezza dello slideshow
- height: 332, // altezza dello slideshow
- strips: 20, // numero delle strscie
- delay: 5000, // tempo tra 2 immagini
- stripDelay: 50, // tempo di comparsa delle striscie
- titleOpacity: 0.7, // opacità della didascalia
- titleSpeed: 1000, // velocità di apparizione della didascalia
- position: ‘alternate’, // posizione della didascalia: top, bottom, alternate, curtain
- direction: ‘fountainAlternate’, // direzione delle striscie: left, right, alternate, random, fountain, fountainAlternate
- navigation: false // pulsanti di navigazione
- links: false // immagini come link
Molto semplice da realizzare, ma di grande impatto. Se hai qualche dubbio chiedi pure!
Mirko D'Isidoro on 
Rosario on 
Tamal on 
federica on 
fedeweb on 
4 maggio 2010 at 09:04
Bella slide, sempre articoli interessanti.
Però, direi che il soggetto è di gran lunga meglio dello slide.
26 novembre 2010 at 07:45
Ciao Federico, ho un problema. Ho ridimensionato lo slide delle foto e la fascia del “title” mi è rimasta della dimensione che c’è nel tuo esempio. Come faccio ad adattarla? Grazie mille
26 novembre 2010 at 13:10
Ciao Aleinux, per ridimensionare anche il title devi modificare il selettore ft-title nel foglio di stile style.css.
.ft-title {
padding:10px;
text-align:left;
width:580px; /*valore da modificare*/
}
27 novembre 2010 at 08:06
Grazie mille
20 dicembre 2010 at 23:22
Ciao! Ho provato a inserire la slideshow con la navigazione. Va tutto perfettamente, ma non riesco a modificare l’aspetto dei numeri per la selezione rapida delle foto. Ho provato sul css con .ft-buttons ma non mi ha dato risultati. Ho visto sul css dell’esempio che per personalizzare si usa il “a” e “a:hover” ma non sarebbe proprio corretto. Suggerimenti?
Grazie
24 gennaio 2011 at 17:10
grande fede!!!! grazie!!!
9 maggio 2011 at 13:05
Voglio ringraziarti per avermi permesso di utilizzare questo componente ottenendo uno straordinario effetto con pochissima fatica!
Vorrei però eliminare le scritte prev e next e magari anche i numeretti in basso, come potrei fare?
Ciao.
9 maggio 2011 at 16:00
Ciao Lauro e benvenuto nel blog
Per eliminare le scritte e i numeretti metti nei parametri dello script navigation:false. Fammi sapere se risolvi
11 maggio 2011 at 23:40
Perfettamente risolto! Grazie.
14 maggio 2011 at 12:15
Ciao,
se le slide sono numerose vorrei dare una descrizione ma non vorrei vedere quella lunga serie di numeri in basso. Ho risolto “artigianalmente” applicando uno sfondo dello stesso colore del font, ma mi piacerebbe utilzzare una tecnica un pò più “scientifica.”
Grazie
21 maggio 2011 at 09:27
spero che le capacità di questa “NUOVA” tecnologia non si limitino a queste presentazioni degne di power point
13 marzo 2012 at 12:23
grazie fede per la dritta.
splendido ma nn mi funziona
purtroppo son alle prime armi in javascript. avevo trovato anche tutorial in uk (senza successo anche quesi tentativi…).
nn riesco a capire quale può essere la mia mancanza.
ho aperto anche files di esempio in dreamweaver ma anch’esso nn funziona (collegato jquery.js ecc…)
potrei inviarti link della pagina per avere qualche dritta?
grazie mille per la disponbilità