Utiliser le merveilleux plugin jFlow

Il semble que l’obsession actuelle de l’industrie de la conception Web réside dans la possibilité de créer une "section vedette". Bien que cela ait déjà demandé une grande habileté, ce n'est plus le cas. Dans ce screencast, je vais vous montrer comment créer facilement une section avec défilement en utilisant l'un des thèmes populaires de Theme Forest comme référence. Entrons dedans!

* Désolé pour la qualité audio moins que parfaite. Je voulais prendre un micro à condensateur cette semaine, mais j'ai été très occupé. Je promets d'obtenir que pris en charge dès que possible. Aussi, si vous êtes intéressé par la création de tutoriels vidéo pour nous, écrivez-moi à [email protected].

Vous pouvez voir et acheter le thème de Justin ici.

Téléchargez le plugin

Comme toujours avec un nouveau plugin, la première étape consiste à visiter le site web du créateur et à télécharger le plugin. Tout ce dont vous aurez besoin est un fichier Javascript minuscule - et bien sûr une copie de la bibliothèque principale de jQuery. Pendant que vous êtes sur le site, prenez quelques instants pour passer en revue les concepts. Vous serez surpris de la simplicité de la mise en œuvre, relativement parlant (ou en tapant?).

la mise en oeuvre

Une fois le fichier Javascript sauvegardé sur votre disque dur, importez-le dans une nouvelle application Web telle que.

* Notez que vous devriez importer la bibliothèque principale avant jFlow. Sinon, vous aurez des erreurs évidentes!

Pour utiliser le plugin jFlow, vous devez comprendre le fonctionnement de certains identifiants et classes..

contrôleur div #: Cet élément servira de "crochet" lorsque vous appelez notre jQuery.
.jFlowControl: Ces étendues seront des enfants de la division #controller. Pour autant de diapositives que vous avez, vous devez créer des balises span associées à cette classe. Par exemple, si j'ai cinq diapositives, je dois avoir cinq balises avec une classe de .jFlowControl. Vous l'aurez compris plus en détail, par exemple.
div # slides: Dans la diapositive de diapositives, vous devez imbriquer des divs supplémentaires contenant le contenu souhaité pour chaque "diapositive". Plus sur cela plus tard.
.jFlowPrev, .jFlowNext: Ces deux classes vous permettent de passer à la diapositive suivante ou inversement..

Exemple de document HTML

   No 1  No 2  N ° 3  
    
  Voici une image en vedette. Agréable!
 Voici une autre image en vedette soignée. Agréable!
 Voici une dernière image sélectionnée très cool. Agréable!

Allons un peu sur ça.

Comme avec la plupart des pages, nous avons enveloppé tout notre contenu dans un élément "wrap". Ceci est purement pour des raisons esthétiques. Ce n'est pas obligatoire.
Dans mon contrôleur div (qui est le hook pour jFlow), j'ai ajouté trois balises span avec une classe de "jFlowControl". Pensez à ces portées comme des onglets. Si vous cliquez sur "Non 3", il passera rapidement au troisième associé "faire glisser". N'oubliez pas que le nombre de balises span que vous possédez doit être égal au nombre de div dans votre div "slide". Notez que les deux ont trois.
En avançant, nous arrivons maintenant à une div avec un identifiant de "prevNext". Ce n'est pas un identifiant clé, j'aurais pu le nommer Rick si je l'avais voulu. Il s’agit simplement d’une division de l’emballage pour que je puisse contrôler l’emplacement de mes boutons "Suivant" et "Précédent" sur la page. Le nom de classe des images est toutefois important: 'jFlowPrev', 'jFlowNext'.
Enfin, nous arrivons à la "diapositives" div. Dans cette division, nous placerons des divs enfants. Chacun de ces enfants servira pour être un "onglet". Encore une fois, notez que si je voulais ajouter une quatrième image, il me faudrait aussi une balise span "jFlowControl" supplémentaire dans la commande div..

jQuery

Le code que nous devons écrire est assez simple. Tout d’abord, passez en revue le script final, puis je passerai en revue chaque ligne..

 $ (function () $ ("# contrôleur"). jFlow (slides: "#slides", largeur: "980px", hauteur: "313px", durée: 600);

C'est tout!. Premièrement, nous attendons que le document soit prêt à être parcouru. Ensuite, nous prenons notre contrôleur div et appelons la méthode "jFlow". Nous avons beaucoup de paramètres à notre disposition, mais nous n’en utiliserons que quelques-uns..

Diapositives: Il demande: "Quel est le nom de l'élément div qui contient chaque diapositive - ou onglet? Nous l'associerons à la div" diapositives "appropriée que j'ai créée précédemment. Mais vous pouvez le modifier si vous le souhaitez..
Largeur hauteur: Ce sont nécessaires. Dans cet exemple, je n'utilise que des images. En conséquence, j'ai défini les valeurs de largeur et de hauteur égales à celles des images..
Durée: En millisecondes, combien de temps souhaitez-vous passer d'une diapositive à l'autre? J'ai mis 600 - ce qui est environ une demi-seconde.

Vous avez fini

La seule autre chose que vous voudrez implémenter est un style CSS. Cependant, jFlow fonctionnera parfaitement sans cela. Ce ne serait évidemment que pour des raisons esthétiques. Si vous désirez plus d'informations, je vais un peu plus sur le style dans le screencast..

La disposition que vous voyez ci-dessus est intentionnellement simple. Je vous laisse imaginer toutes les utilisations différentes!

Il y a quelques semaines, Chris Coyier a créé un tutoriel sur un plugin similaire - "codaSlider". J'ai personnellement utilisé le plugin dans quelques projets, cependant, j ai trouvé que jFlow est beaucoup plus simple et facile à utiliser. De toute façon, les deux sont de puissants plugins. Utilisez-les judicieusement.

Abonnez-vous aux screencasts hebdomadaires

Vous pouvez ajouter notre flux RSS à vos podcasts ITUNES en procédant comme suit:

Une fois ITUNES chargé, cliquez sur l'onglet "Avancé"
Choisissez "S'abonner au podcast"
Entrez "http://feeds.feedburner.com/NETTUTSVideos"

Ça devrait le faire! Le screencast sera également consultable sur ITUNES dans les vingt-quatre prochaines heures..

Ressources supplémentaires

Plugin jFlow

Ceci est le site home du plugin jFlow. Vous allez commencer avec le fichier Javascript avec quelques exemples utiles.

Visiter le site web
Thème Forêt

Si vous souhaitez en savoir plus ou simplement gagner de l'argent supplémentaire, rendez-vous sur ThemeForest.net..

Visiter le site web
Fun dynamique avec Simple Pie et jQuery - Tutoriel de curseur Coda

Découvrez un autre plugin jQuery qui remplit une fonction similaire. Dans ce tutoriel, Chris Coyier vous montrera comment implémenter le plugin coda slider pour créer une belle blogroll..

Lire l'article

Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.

Code