tags : info-bulle, plugin JQuery
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.
catégorie : JQuery
tags : galerie photo, 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(); }); |
catégorie : JQuery
tags : plugin JQuery, styleswitcher
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 !
catégorie : JQuery
tags : info-bulle, plugin JQuery
Le plugin JQuery CursorMessage permet d’afficher une info-bulle qui suit le curseur. L’appel de la « tooltip » (info-bulle) peut être déclenchée avec n’importe quelle événement (keypress, onclick, onblur…).
Les paramètres du plugin sont :
- Le décalage selon l’axe X de l’info-bulle par rapport à la position du curseur.
- Le décalage selon l’axe Y de l’info-bulle par rapport à la position du curseur.
- La durée d’affichage de l’info-bulle.
En somme, un bon petit plugin, facile à mettre en place et à gérer. Il remplit bien la fonction qu’on lui demande !
catégorie : JQuery
tags : photo, plugin JQuery
Petit plugin JQuery que j’ai découvert ce matin. Il permet de faire un effet avant/après sur une photo. Simplement grâce à un glisser/déposer sur l’icone permet de déplacer la limite entre les deux images.
Si les explications n’étaient pas claires, tu peux toujours aller voir la démo préparée pour l’occasion. Le plugin JQuery Before After est fluide, l’animation est nickel et l’effet rendu du plugin fonctionne bien. Il peut être utile pour un portfolio pour montrer diverses compétences en retouches d’image par exemple.
Le plugin propose diverses options comme activer une animation au début (le curseur se déplace tout seul), le délai avant le début de cette animation, la durée de cette animation, la présence des liens « show only before » et « show only after ». Enfin petit détail, il faut que les deux images (avant et après) soit de la même taille pour le plugin fonctionne bien !
catégorie : JQuery
tags : menu déroulant, plugin JQuery
Pour ce lundi matin, je vais simplement présenter un autre plugin de menu déroulant JQuery. JQueryUI Potato Menu nécessite, comme son nom l’indique, le plugin JQuery UI en plus du framework JQuery.
La particularité de ce plugin est qu’il gère les menu horizontaux (comme sur l’image ci-dessus) et les menus verticaux (c’est d’ailleurs la seule option possible à l’initialisation du menu). Sur mon poste, les effets d’apparition et de disparition des sous-menus sont bien fluides, ils apparaissent instantanément.
Enfin, les menus déroulants sont facilement personnalisables en CSS. Il n’y a pas 35 classes imbriquées comme j’ai pu le voir avec certains plugins JQuery. Tout est très bien expliqué sur la page de démo et d’explications du plugin.
catégorie : JQuery
tags : lavalamp, menu, plugin JQuery
Lavalamp est un plugin JQuery que je connais depuis quelques temps maintenant. Il m’a été rappelé hier par @Dgamax sur Twitter.
Le plugin permet tout simplement de faire un menu (sans sous-menu déroulant). Une légère animation est faite au survol avec une image qui se déplace et qui s’adapte à la taille de l’élément survolé. Plusieurs variantes et plusieurs options sont disponibles, comme, par exemple, pour l’image retourne à son point de départ ou non à la fin du survol. Les exemples proposées sur la page de démo illustrent bien tout ça (même si certains exemples ne pas très très beaux…).
Encore un plugin qui a un rendu qui peut ressembler à du Flash et qui permet de s’en passer (surtout sur un élément aussi important point de vue SEO). A noter que je m’étais servi de ce plugin JQuery pour le menu de mon site portfolio : arnaud-k.fr
catégorie : JQuery