Utilizzando il meraviglioso jFlow Plugin

Sembra che l'ossessione del settore del web design in questo momento sia la possibilità di creare una "sezione in primo piano". Anche se una volta può aver richiesto una grande abilità, non è più così. In questo screencast, ti mostrerò come creare facilmente una sezione in evidenza scorrevole utilizzando uno dei temi popolari della Theme Forest come riferimento. Entriamo in esso!

* Mi dispiace per la qualità audio non perfetta. Intendevo prendere un microfono a condensatore questa settimana, ma sono stato super impegnato. Prometto di prenderti cura di ASAP. Inoltre, se sei interessato a creare tutorial video per noi, scrivimi a [email protected].

È possibile visualizzare e acquistare il tema di Justin qui.

Scarica il plugin

Come sempre con un nuovo plugin, il primo passo è visitare il sito web del creatore e scaricare il plug-in. Tutto ciò di cui avrai bisogno è un piccolo file Javascript e, naturalmente, una copia della libreria principale di jQuery. Mentre sei nel sito, dedica qualche momento a ripassare i concetti. Sarai sorpreso di quanto sia semplice l'implementazione, relativamente parlando (o digitando?).

Implementazione

Dopo aver salvato il file Javascript sul tuo disco rigido, importalo in una nuova applicazione web in questo modo.

* Nota che dovresti importare la libreria principale prima di jFlow. Altrimenti, otterrai alcuni errori evidenti!

Per utilizzare il plugin jFlow, è necessario comprendere la funzione di alcuni ID e classi.

div # controllore: Questo elemento servirà da "gancio" quando chiamiamo il nostro jQuery.
.jFlowControl: Questi span saranno figli del div #controller. Per tutte le diapositive che hai, devi creare tag di estensione associati con questa classe. Ad esempio, se avessi cinque diapositive, devo avere cinque tag con una classe di .jFlowControl. Lo capirai più con l'esempio, a breve.
div # diapositive: All'interno del div slide, è necessario nidificare div aggiuntive che contengono il contenuto desiderato per ogni "diapositiva". Maggiori informazioni su questo più tardi.
.jFlowPrev, .jFlowNext: Queste due classi ti consentono di passare alla diapositiva successiva o viceversa.

Esempio di documento HTML

   N. 1  N. 2  Numero 3  
    
  Ecco un'immagine in primo piano. Bello!
 Ecco un'altra immagine in evidenza. Bello!
 Ecco un'ultima immagine molto interessante in primo piano. Bello!

Andiamo oltre questo un po '.

Come con la maggior parte delle pagine, abbiamo avvolto il nostro intero contenuto in un elemento "wrap". Questo è puramente per ragioni estetiche. Non è richiesto.
Nel mio controller div (che è l'hook per jFlow), ho aggiunto tre tag span con una classe di "jFlowControl". Pensa a questi intervalli come schede. Se fai clic su "No 3", passerà velocemente al terzo associato "diapositiva". Ricorda, il numero di tag di estensione deve essere uguale al numero di div all'interno del tuo div "slide". Nota che entrambi hanno tre.
Andando avanti, ora arriviamo a un div con un id di "prevNext". Questo non è un id chiave, avrei potuto chiamarlo Rick se avessi voluto. È semplicemente un wrapper div in modo che io possa controllare dove i miei pulsanti "Avanti" e "Precedente" vanno sulla pagina. Il nome della classe delle immagini è tuttavia importante: "jFlowPrev", "jFlowNext".
Infine, veniamo al div "diapositive". All'interno di questo div, posizioneremo i bambini div. Ognuno di questi bambini servirà per essere una "scheda". Ancora una volta, si noti che se volessi aggiungere una quarta immagine, avrei anche bisogno di un ulteriore tag span "jFlowControl" all'interno del controller div.

jQuery

Il codice che dobbiamo scrivere è abbastanza semplice. Innanzitutto, rivedi lo script finale, quindi passerò sopra ogni riga.

 $ (function () $ ("# controller"). jFlow (slides: "#slides", larghezza: "980px", altezza: "313px", durata: 600););

Questo è tutto!. In primo luogo, stiamo aspettando quando il documento è pronto per essere attraversato. Quindi, prendiamo il nostro controller div e chiamiamo il metodo "jFlow". Ci sono molti parametri a nostra disposizione, ma ne useremo solo alcuni.

Slides: Sta chiedendo, "Qual è il nome dell'elemento div che contiene ogni diapositiva - o scheda? Lo assoceremo con il div" slide "appropriato che ho creato in precedenza, ma puoi cambiarlo se vuoi.
Larghezza altezza: Questi sono richiesti. In questo esempio, sto solo usando le immagini. Di conseguenza, ho impostato i valori di larghezza e altezza uguali a quelli delle immagini.
Durata: In millisecondi, quanto a lungo vuoi passare dalla diapositiva alla diapositiva? Ho impostato 600 - che è circa un mezzo secondo.

Hai finito

L'unica altra cosa che vorresti implementare è un po 'di stile CSS. Tuttavia, jFlow funzionerà perfettamente senza di esso. Questo ovviamente sarebbe solo per ragioni estetiche. Se desideri maggiori informazioni, riporto lo stile un po 'di più nello screencast.

Il layout che vedi sopra è intenzionalmente semplice. Lo lascerò a voi per immaginare tutti i diversi usi!

Qualche settimana fa, Chris Coyier ha creato un tutorial su un plugin simile - "codaSlider". Ho usato personalmente il plugin in un paio di progetti, tuttavia ho scoperto che jFlow è molto più semplice e facile da usare. Ad ogni modo, entrambi sono potenti plugin. Usali saggiamente.

Iscriviti agli Screencast settimanali

Puoi aggiungere il nostro feed RSS ai tuoi podcast ITUNES effettuando le seguenti operazioni:

Una volta caricato ITUNES, fai clic su "Scheda Avanzate"
Scegli "Abbonati al Podcast"
Inserisci "http://feeds.feedburner.com/NETTUTSVideos"

Questo dovrebbe farlo! Lo screencast sarà anche ricercabile su ITUNES nelle prossime ventiquattro ore.

Risorse addizionali

jFlow Plugin

Questo è il sito principale del plugin jFlow. Avrai iniziato con il file Javascript insieme ad alcuni utili esempi.

Visita il sito web
ThemeForest

Se stai cercando di saperne di più o semplicemente di guadagnare qualcosa in più, assicurati di fare una visita a ThemeForest.net.

Visita il sito web
Divertimento dinamico con Simple Pie e jQuery - Tutorial del cursore Coda

Guarda un altro plugin jQuery che svolge una funzione simile. In questo tutorial, Chris Coyier ti mostrerà come implementare il plug-in Tailider per creare un bellissimo blogroll.

Leggi l'articolo

Iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.

Codice