Après avoir testé plusieurs plugins JQuery d’info-bulles, j’ai enfin trouvé le plugin ultime : Qtip. Le plugin JQuery gère toutes sortes d’info-bulles différente :

• avec le contenu basé sur l’attribut title
• avec le contenu d’un élément du DOM
• avec des images
• des info-bulles modales (de type boîte de dialogue)
• avec le contenu chargé en AJAX
• …

Pleins d’options sont disponibles telles que le placement exact de la tooltip, son style, sa taille… Et j’en passe. Il faut voir toutes les démos disponibles sur le site !

Demo du plugin Qtip

Les info-bulles par défaut sont déjà parfaitement exploitable, alors rien qu’en les personnalisant un peu…

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 !

Le plugin JQuery Delectable (encore un plugin par theodin) permet d’afficher très facilement les dernières adresses ajoutées à un compte Delicious. Il est similaire au plugin JQuery Tweetable dans son fonctionnement. Comme souvent, j’ai préparé une petite démo :

demo du plugin JQuery Delectable

Le plugin est assez complet car, en plus d’afficher l’URL du bookmark, on peut afficher les tags rattachés et la date d’ajout. Un système de mise en avant des tags est même intégré lorsque l’on clique sur un de ces tags.

Comme toujours, il faut importer JQuery et le plugin dans sa page HTML :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.delectable.js" type="text/javascript"><!--mce:1--></script>

On crée par la suite un bloc vide auquel on donne un id pour le sélectionner avec JQuery :

Il faut enfin initialiser le plugin JQuery en passant le sélecteur du div créé précédemment et quelques options :

$(document).ready( function () {
	$('#delicious').delectable({
                username: 'arnaudk', // nom d'utilisateur du compte Delicious
                tags: true, // on affiche ou non les tags
                date:true, // on affiche ou non la date d'ajout du bookmark
                limit: 20 // nombre de bookmarks à afficher
        });
});

Pour conclure, encore un plugin JQuery permettant de lier les divers réseaux sociaux et autres sites dits ‘2.0′. On peut maintenant afficher facilement son Twitter, ses dernières photos Flickr et ses derniers bookmarks Delicious sur une même page !

Le plugin JQuery Flip! permet de faire des tourner des blocs, des éléments selon les axes X ou Y avec un effet 3d. Pour mieux comprendre, je t’invite à aller voir la démo sur le site du plugin.

Voir la démo

L’animation est (sur mon poste) fluide. on peut même voir un fondu entre les couleurs de fond des blocs. Divers paramètres permettent de personnaliser l’animation : la direction, la vitesse, la couleur de fond et de paramétrer des callbacks.

Enfin, à noter qu’en plus du framework JQuery, il est nécessaire d’avoir le plugin JQueryUI pour faire fonctionner le plugin JQuery Flip!.

Le plugin JQuery wtooltip permet de créer des info-bulles avec JQuery très simplement. En effet, pour cela, il suffit d’importer le fichier JavaScript du plugin dans la page voulue et avec une seule ligne de code, des infos-bulles apparaissent :

 $("a").wTooltip(); 
// tous les liens ayant un attribut title auront une info-bulle

Le design par défaut de ces infos-bulles est très sobre (texte en noir, fond gris). Au survol d’un lien (ou d’un bloc), l’info-bulle suit simplement le curseur le temps du survol. Pas de fioritures tel un effet d’apparition. Le design des info-bulles générées est facilement personnalisable : directement avec des paramètres du plugin JQuery.

Le plugin JQuery HoverScroll permet de faire une galerie photo animée au survol. Les photos défilent simplement dans le conteneur au survol du bloc. Selon la position du curseur le défilement part dans un sens ou un autre. Il est possible de faire une galerie verticale ou horizontale.

Le flèches apparaissent de manière semi-opaque sur les photos. Le rendu du plugin est très net et fait assez pro (comme souvent ça me fait penser à du Flash ).

Le fonctionnement est très simple, il suffit de créer une liste non ordonnée (<ul> et <li>) contenant les images que l’on veut (il est apparemment nécessaire de préciser la largeur et la hauteur pour chaque élément de liste) :

1
2
3
4
5
6

<ul id="galerie-photo">
	<li style="width:67px; height:50px;"><img src="image1.jpg" /></li>
	<li style="width:67px; height:50px;"><img src="image2.jpg" /></li>
	<li style="width:67px; height:50px;"><img src="image3.jpg" /></li>
	<li style="width:67px; height:50px;"><img src="image4.jpg" /></li>
</ul>

Et après avoir importé JQuery et le plugin de manière habituel dans la page HTML, il n’y a plus qu’à initialiser le plugin JQuery comme ceci (en mettant le bon sélecteur pour l’ <ul>) :

1
2
3

$(document).ready(function() {
	$('ul#galerie-photo').hoverscroll();
});

Le plugin JQuery Style Switcher (par Kevinluck) permet, comme son nom l’indique, de changer le style de la page. Le plugin donne donc la possibilité de changer la feuille de style attachée à la page sans aucun rechargement de la page.

Il est donc facile de mettre en place des liens pour permettre à l’utilisateur de sélectionner le style qu’il veut. Le plugin se permet même de créer un cookie pour enregistrer le style préféré du visiteur pour l’afficher par défaut lors de la prochaine visite !

voir la demo de JQuery Style Switcher

La mise en place du plugin JQuery est très simple. Pour cela il suffit comme à chaque d’importer le framework JQuery et le plugin dans la page, d’ajouter la classe « styleswitch » aux liens sur lesquels on souhaite appliquer le styleswitch. Il faut également penser à mettre en attribut « rel » du lien le nom du style que l’on va activer :

<a href="#" rel="style" class="styleswitch">style 1</a>
<a href="#" rel="style2" class="styleswitch">style 2</a>

Enfin, entre les balises <head>, il faut importer toutes les feuilles de style que l’on veut en ajoutant « alternate » dans l’attribut « rel » de la balise <link> des feuilles de style qui ne seront pas activées par défaut et mettre dans l’attribut title le nom du style (pour qu’il soit bien lié au lien que l’on souhaite) :

<link rel="stylesheet"  href="feuilledestyle1.css" type="text/css" title="style" />
<link rel="alternate stylesheet" type="feuilledestyle2.css" title="style2" />

Il n’y a rien de plus à faire, le plugin s’occupe de tout !