En fait derrière ce titre un peu racoleur (je l’avoue), je vais présenter 10 plugins JQuery parmi ceux que je trouve les plus utiles. J’ai essayé de diversifier au plus les plugins que je présente, on retrouve donc en vrac des plugins pour les photos, des sliders, un color picker… Je me suis déjà servi de (quasiment) tous ces plugins sur les divers sites auxquels j’ai participé.

Photos / Lightbox

Cycle :

Le plugin JQuery Cycle est, je pense, un des plugins les plus connus. Il permet de faire des diaporamas de photos. Sa facilité d’utilisation et le grand nombre d’effets de transition proposés permet à (presque) n’importe la possibilité de créer un diaporama. J’avais rédigé, il y a quelques temps un tutorial pour mettre en place ce plugin.

JParallax :

JParallax est un plugin unique en son genre. Il permet de créer un effet ‘parallaxe’, c’est-à-dire que diverse images superposées bougent comme si l’on regardait par une fenêtre. Je m’en suis servi sur mon portfolio, je t’invite donc à aller voir ce que ça donne !

Shadowbox :

Un des meilleurs plugins de Ligthbox. Il est très souple et très complet, on peut afficher tout et n’importe quoi dans la shadowbox : une image, du contenu HTML, une page complète (iframe), une animation flash… Beaucoup d’options sont disponibles à l’initialisation. J’avoue que ce n’est pas à proprement parler un plugin spécifique à JQuery mais je l’utilise très souvent !

Slider

EasySlide :

Un slider très complet (rien qu’en voyant le nombre d’options disponibles). Le résultat final donne un slider très fluide, qui fonctionne bien comme on lui demande. Avec tous les paramètres qu’on peut définir, il est très facilement personnalisable.

Scrollable :

Le plugin Scrollable permet également de créer un slider. Mais celui-ci est différent du plugin EasySlide dans le sens ou il est possible afficher les éléments 3 par 3 (ou 4 par 4…). Ici aussi il y a plein de paramètres que l’on peut définir. Il est même possible de gérer la molette de la souris pour scroller le éléments.

Menu déroulant

Droppy :

Droppy est un plugin assez utilisé (je l’ai vu sur de nombreux sites). Les menus déroulants n’ont jamais été aussi facile à mettre en place depuis la sortie du plugin. Il suffit d’imbriquer des listes non ordonnées (<ul>) afin de créer les différents niveaux du menu déroulant, de modifier les couleurs et les quelques options disponibles et le tour est joué ! A noter que j’avais rédigé un tutorial expliquant son utilisation.

Color Picker

Farbtastic :

Le plugin JQuery Farbtastic permet d’intégrer facilement un color picker sur une page HTML. Il peut servir notamment pour toutes sortes d’applications en ligne. Pour l’avoir utiliser sur un site perso, je peux dire qu’il est assez d’utilisation.

Divers

LazyLoad :

Le plugin Lazy Load permet le chargement à la volée des photos. Les photos uniquement visible au chargement de la page sont chargées (donc celles du haut de la page) et les autres sont chargées au fur et à mesure que le visiteur scrolle. Le plugin permet donc d’alléger la charge serveur !

Contactable :

Contactable est plugin JQuery que j’ai présenté il y a peu. Il permet très facilement de créer un formulaire de contact avec un lien qui se calera sur le bord gauche de la page. Il y même le fichier PHP qui permet de traiter le formulaire fourni avec le plugin. C’est donc du tout cuit !

Impromptu :

Impromptu est plugin JQuery permettant de mettre en avant des informations comme avec un ‘alert’ (ou ‘confirm’ ou ‘prompt’) de JavaScript. La différence est que les boîtes de dialogues qui s’affichent sont personnalisable en CSS et un le contenu du reste du site est ‘caché’ avec un effet d’opacité.

Si tu connais d’autres plugins JQuery dont je n’ai (encore) parlé sur le blog, n’hésite pas à me prévenir dans les commentaires, par twitter ou par signaux de fumée !
Ca faisait quelques temps que j’avais pas rédigé un article aussi long 8O. Je vais essayer de le faire plus souvent !

Pour le deuxième top 10 de la semaine, une belle sélection de sites web ayant des designs bien faits et parfois étonnants !