Tutorial Jquery – Uno Bellissimo Slideshow Di Foto Originale
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!
13 Commenti
[…] Tutorial Jquery – Uno Bellissimo Slideshow Di Foto Originale | Fedeweb (tags: jquery tutorial slideshow) […]
Bella slide, sempre articoli interessanti.
Però, direi che il soggetto è di gran lunga meglio dello slide. 🙂
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
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*/
}
Grazie mille
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
grande fede!!!! grazie!!!
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.
Ciao Lauro e benvenuto nel blog 😉
Per eliminare le scritte e i numeretti metti nei parametri dello script navigation:false. Fammi sapere se risolvi 😉
Perfettamente risolto! Grazie.
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
spero che le capacità di questa “NUOVA” tecnologia non si limitino a queste presentazioni degne di power point
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à