Un article rapide, juste pour signaler que j’ai préparé une page WordPress recensant tous les plugins JQuery dont j’ai pu parlé sur ce blog. A ce jour j’en ai dénombré 56 ( \o/ ). J’en ai profité pour les classer par catégorie, en espérant que te sera utile pour les jours où tu auras besoin d’un plugin JQuery !

Pas encore de billet sur le même sujet !

12 mois après ma première liste des meilleurs plugins JQuery, je me suis dit qu’une petite mise à jour s’imposait. Dans cette liste j’ai mis quelques plugins dont j’ai déjà parlé ici,des plugins que j’utilise tous les jours et des plugins que je compte utiliser dans le futur.

Ce n’est pas vraiment un « Best Of », c’est juste une sélection de plugins JQuery coup de coeur. Et comme c’est le principe d’une liste, celle-ci est tout à fait subjective .

JQueryUI

Comment ne pas commencer par JQueryUI… Ce n’est pas vraiment un plugin JQuery, mais il propose tellement de bonnes choses que je suis sûr que tous les développeurs qui utilisent JQuery l’ont utilisé au moins une fois. Avec JQueryUI tu peux faire des DatePicker, des boîtes modales, des listes avec du Drag’n'Drop, …

Qtip

J’en ai déjà parlé sur le blog, mais pour moi le plugin JQuery Qtip est le meilleur plugin pour faire des tool-tips. Le nombre d’options et de configurations permet d’en faire ce que l’on veut.

JgChart

Le plugin JgChart est une simple surcouche à l’API Google Chart. Cela permet de faire des graphiques encore plus facilement et de le configurer plus simplement.

BxCarousel

J’en ai parlé sur ce blog il n’y a pas si longtemps que ça. Mais pour ceux qui n’était pas là, BxCarousel détone, pour moi, Jcarousel dans les plugins de carousel. Il est plus simple à mettre en place et, surtout, beaucoup plus simple à personnaliser graphiquement.

DataTables

Ce plugin JQuery permet de faire des tableaux triables et paginables. DataTables facilite l’ergonomie des tableaux de données. Le tout sans recharcger la pge of course. Il propose également la recherche directement dans le tableau.

AjaxUpload

Ce plugin JQuery permet, comme son nom l’indique très clairement, de faire de l’upload en Ajax. Assez simple d’utilisation et à configurer, AjaxUpload est idéal pour proposer des formulaires d’upload d’avatar par exemple…

NivoSlider

J’ai parlé la semaine dernière de Nivo Slider. Il s’est retrouvé dans un liste de 3 sliders JQuery. NivoSlider propose beaucoup d’options et plusieurs Callbacks pour animer le slider. Certes, j’avoue que certains effets de transitions sont un peu kitsch…

Fancybox

Fancybox est pour moi le meilleur plugin de lightbox JQuery. C’est celui que j’utilise depuis un an dans tous les sites web sur lesquels je participe ! Ses options et ses personnalisations en font un plugin souple et simple à mettre en place. Je ne me suis jamais trouvé bloqué avec la fancybox.

Juitter

Juitter est un plugin JQuery différent de ceux présentés ci-dessus. Il permet d’afficher une timeline, un recherche Twitter. Comme tu peux le voir, il gère les avatars, les mentions, les hashtags…

AutoComplete

Un autre plugin JQuery que j’ai pu utiliser ces derniers temps : AutoComplete. Il ne faut pas se fier à son apparence, c’est un plugin vraiment puissant. Il propose pas mal de fonctionnalités avancées telles que la gestion du cache, les délais, des callbacks avant l’affichage…

Pas encore de billet sur le même sujet !

Le plugin JQuery jFlickrFeed permet, à partir d’un simple identifiant Flickr, d’afficher les dernières photos d’un membre Flickr. C’est ultra-simple à utiliser, ça ne ralentit pas le chargement de la page (chargement en asynchrone).

Un système de gestion de « templates » a été mis en place pour choisir la structure HTML des photos qui vont être afficher. Voici un exemple de l’initialisation et de la configuration du plugin JQuery :

$('#flickr').jflickrfeed({
   limit: 14, // nombre maximal de photos à afficher
   qstrings: {
      id: '31326696@N02' // id de membre Flickr
   },
   itemTemplate: // template pour l'affichage d'une photo
      '<li>' +
         '<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
      '</li>'
});

Le plugin offre bien entendu une page de démo du plugin. Il est même tout à fait possible de coupler le plugin JQuery avec d’autres tels que le plugin JQuery Cycle pour faire un diaporama ou la lightbox Colorbox, tout y est expliqué dans les démos !

Pas encore de billet sur le même sujet !

Pour continuer dans la série des lightbox JQuery, un plugin ultra-léger (9 Kio) vient de faire son apparition. Le plugin ColorBox propose quasiment toutes les options qu’un plugin de lightbox peut proposer.

On retrouve environ quarante options : gestion des tailles, gestion de l’opacité, gestion du contenu (inline, html, iframe, images…), gestion des transitions, gestion des vitesses, gestion du clavier et gestion des callbacks (5 au total). Et on a accès à 7 méthodes publiques : next, prev, close, element, resize, init et remove.

Son utilisation reste néanmoins simple, on peut l’initialiser avec juste 1-2 lignes de JQuery en gardant la plupart des paramètres à leur valeur par défaut. Par exemple :

// ici on ne change que les transitions et la vitesse du diaporama
$('a#login').colorbox({transition:'fade', speed:500});

Je ne peut pas te laisser sans un lien vers les démos du plugin JQuery. Je pense que c’est une bonne lightbox, avec la possibilité de faire plein de choses différentes avec. Enfin, et ce n’est pas négligeable, la doc du plugin est claire et facilement trouvable !

Pas encore de billet sur le même sujet !

Le plugin JQuery BMap permet un affichage et un contrôle ultra simple des Google Maps. Avec ce plugin, plus besoin de fouiller dans la doc de Google Maps, il ajout simplement une surcouche afin de contrôler les cartes plus facilement.

Comment ça marche ? C’est très simple, il suffit d’avoir chargé JQuery dans la page ainsi que le fichier de Google Maps (api v3 ou v2) et en quelques lignes, vous pouvez afficher une Google Map avec un ou plusieurs marqueur(s) dessus :

$("#map1").bMap({ // map1 et l'ID du div qui va recevoir la carte
	mapZoom: 11, // niveau de zoom par défaut de la carte 
	mapCenter:[51.501690392607,-0.1263427734375], // latitude et longitude du centre de la carte
	markers:{"data":[ // création de marqueurs dès le chargement de la page
		{
			"lat":51.49757618329838, // latitude du 1er marqueur
			"lng":-0.1746654510498047,  // longitude du 1er marqueur
			"title":"Science Museum",  // titre à afficher dans l'infobulle
			"body":"Exhibition Road, London SW7" // contenu à afficher dans l'infobulle
		},{ // 2è marqueur :
			"lat":51.47769451182406,
			"lng":-0.0009441375732421875, 
			"title":"Royal Observatory Greenwich", 
			"body":"Blackheath Ave, Greenwich, London SE10"
		}	// et on peut ajouter autant de marqueurs que l'on veut...
	]}
});

Ce n’est pas plus compliqué que ça. Il est proposé environ dix options pour afficher juste la carte, après on en trouve d’autres pour les marqueurs, des méthodes AJAX pour l’affichage de zone (polygone ou autre). A noter que l’on quand même se servir d’autres méthodes proposées par Google même en utilisant le plugin.

Ce plugin JQuery reste néanmoins juste une alternative pour afficher et contrôler des Google Maps simples. Je ne pense pas que ce soit l’idéal pour des cartes avec plein d’options de contrôle.

Pas encore de billet sur le même sujet !

Après un billet (il y a quelques temps déjà) présentant une liste de sites contenant des jolis sliders et la présentation du plugin EasySlider, je vous propose 3 nouveaux plugins pour faire des sliders avec JQuery. Ce sont 3 plugins qui vont faire la même chose, mais avec tout de même quelques diffénces en terme d’options disponibles, de customisations et de contenu (avec images ou textes par exemple).

Plugin JQuery Nivo Slider

Le premier de cette (mini) liste est Nivo Slider. Sa mise en place est aisée et ne demande pas de structure HTML particulière. Apparemment, il ne propose de « slider » que des images (voir des liens contenant… des images).

Le plus intéressant dans ce plugin sont les 19 options disponibles. Outre les options classiques (délais, vittesse, navigation), on peut changer l’animation de transition avec effets assez originaux, la navigation au clavier, l’affichage ou non de miniature sous le slider, la mini-pagination (comme ci-dessus), et diverses callbacks (avant l’animation, après l’animation…).

Pour conclure avec ce plugin, je te laisse aller faire un tour du côté des démos.

Plugin JQuery SimpleSlide

Le deuxième plugin est SimpleSlide. Un plugin, comme son nom l’indique, simple et efficace. Avec ce slider, on n’est pas obligé de faire slider des images, on peut faire défiler le contenu que l’on souhaite !

Par contre, au niveau des options, c’est un petit peu plus léger que le plugin JQuery précédent. On y retrouve les classiques : vitesse et délais, des options pour la barre de statut (elle ne sert pas à naviguer), un callback et c’est à peu près tout. Et si l’on veut ajouter des flèches de navigation (comme ci-dessus), il suffit d’ajout des div avec les bonnes classes (« left-button » par exemple) et le bon attribut « rel ». Avec cette méthode, tu peux aussi faire un bouton de type « jump to » si on veut amener le visiteur à un slide particulier.

D’autres démos de ce plugin sont disponibles ici. Et à noter que tout le contenu du site est dans un SimpleSlide !

Plugin JQuery Orbit

Le dernier plugin de cet article, est similaire à Nivo Slider. Orbit (c’est bien le nom du plugin) permet, en effet, de faire défiler uniquement des images. Je le trouve visuellement réussi, les éléments de navigations, le timer (en haut à droite) sont bien réalisés.

Au niveau des options proposées cela va de la durée de la pause au « mouseout » à la vitesse d’animation de la légende. J’en ai compté 9. Pour moi, il manque quand même la possibilité de paramétrer des callbacks, c’est un des manques de ce plugin. Et c’est à prendre en compte lors du choix du plugin à utiliser.

Maintenant, tu n’as aucune excuse pour ne pas avoir de slider sur ton site !

Pas encore de billet sur le même sujet !

Voici enfin une bonne alternative au plugin JQuery Jcarousel. Le plugin bxCarousel permet comme son nom l’indique de faire un carousel. C’est la solution idéale pour afficher une multitude de miniature d’images sans prendre trop de place.

Le plugin a l’air plus simple à l’utilisation que Jcarousel, notamment au niveau du design et de l’imbrication d’éléments. Le plugin JQuery propose une dizaine d’options allant de la vitesse de l’animation au nombre d’éléments qui se déplacent en passant par le délai entre les animations.

Voici la liste exhaustive des options du plugin :

$(document).ready(function(){
  $('ul').bxCarousel({
	display_num: 4,       // number of elements to be visible
	move: 4,              // number of elements to the shift the slides
	speed: 500,           // number in milliseconds it takes to finish slide animation
	margin:0,             // right margin to be applied to each "li" element (in pixels, although do not include "px")
	auto: false,          // automatically play slides without a user click
	auto_interval: 2000,  // the amount of time in milliseconds between each auto animation
	auto_dir: 'next',     // direction of auto slideshow (options: 'next', 'prev')
	auto_hover: false,    // determines if the slideshow will stop when user hovers over slideshow
	next_text: 'next',    // text to be used for the 'next' control
	next_image: '',       // image to be used for the 'next' control
	prev_text: 'prev',    // text to be used for the 'prev' control
	prev_image: '',       // image to be used for the 'prev' control
	controls: true        // determines if controls will be displayed
  });
});

Je pense que pouvoir utiliser ce plugin à l’avenir, il me reste néanmoins à voir ce qu’il va réellement donner à l’utilisation !

Pas encore de billet sur le même sujet !

Pour une reprise en douceur, voici un article ne parlant QUE de JQuery, avec en vrac quelques news de la 1ère librairie Javascript et quelques liens vers des tutoriaux / plugins qui m’ont marqués ces derniers temps.

On va commencer par cette info qui a tourné ce week-end : vous pouvez désormais retrouver le podcast officiel de JQuery sur podcast.jquery.com. Cela offre une manière différente d’en suivre l’actualité.

Ensuite un outil bien sympathique, proposé par @FGRibreau : le JQuery Expression BenchmarkR. L’idée est simple, l’outil permet de tester la rapidité d’exécution des sélecteurs. Pour cela, il suffit de saisir un bout de code HTML, de choisir quelques sélecteurs à comparer et l’outil s’occupe du reste : il fait une boucle de 5000 essais par sélecteur, enregistre les temps d’exécution et sort un joli graphique (on peut même choisir la couleur du graphique).

Enfin, pour finir ce premier billet (d’une longue série, je l’espère ), un petit plugin JQuery : JQuery Multiselect (démo dispo ici). Ce plugin part d’un constat, les select multiples ne sont pas simples à utiliser pour un un internaute lambda. En effet, il doit comprendre qu’il doit laisser le doigt appuyé sur la touche CTRL du clavier pour sélectionner plusieurs éléments. Donc le plugin JQuery Multiselect permet de remplacer un select multiple en une liste de case à cocher, tout bêtement. Mais je trouve cela beaucoup plus efficace d’un point de vue ergonomique !

Pas encore de billet sur le même sujet !

Le blog CSSKarma nous propose un code JQuery (qui n’est pas tout à fait sous la forme d’un plugin, mais le code est proposé « clé-en-main ») permettant d’améliorer l’ergonomie des formulaires.

L’effet est tout simple, les labels des champs du formulaires sont à l’intérieur des champs de texte inactifs et lorsque le champ prend le focus, son label se déplace vers la gauche pour sortir du champ. Si l’utilisateur n’a rien saisi dans le champ, le label retrouve sa position initiale, autrement, il reste en dehors du champ.

Je trouve cette technique toute bête assez efficace et qui peut ajouter un petit plus à vos formulaires.

Ils ont nommé cela SlidingLabels et un démo est disponible directement ici.

Pas encore de billet sur le même sujet !

Le plugin JQuery Roundabout (clique sur l’image pour accéder au site) permet de manipuler le DOM HTML pour faire des animations et organiser des éléments de manière poussé (comme par exemple sur la capture d’écran ci-dessus).

Les utilisations sont multiples : on peut l’utiliser de manière classique, sur des images ou sur des éléments de formulaires (et c’est cette application que j’apprécie le plus). Il faut aussi voir la démo sur tous les contrôles JQuery réalisables avec le plugin JQuery.

Le nombre d’options est assez important, on peut donc faire plein de choses différentes avec le plugin. J’ai trouvé la doc bien claire et exhaustive, les exemples et démos sont suffisants. Il ne faut rien de plus, à mon avis, pour le classer parmi les bons plugins JQuery !

Pas encore de billet sur le même sujet !

Le plugin JQuery Popeye (sympa le jeu de mot) est un plugin de ligthbox classique avec des fonctionnalités supplémentaires. Tout d’abord, à l’agrandissement, l’image n’est pas centrer sur la page, elle démarre à l’endroit où elle se situe dans la page en passant au dessus du contenu.

Il y a également la possibilité de d’afficher une légende sous l’image au survol. A noter qu’il est possible de faire apparaître les boutons de contrôle de l’image directement sur la miniature (image précédente, image suivant, agrandissement de l’image).

Le plugin est bien fait, on voit bien que le graphisme du plugin a été très travaillé. Le nombre d’options est assez élevé et qui sont suffisant pour un plugin de lightbox.

démo

Pas encore de billet sur le même sujet !

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…

Pas encore de billet sur le même sujet !

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 !

Pas encore de billet sur le même sujet !

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 !

Pas encore de billet sur le même sujet !

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!.

Pas encore de billet sur le même sujet !

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.

Pas encore de billet sur le même sujet !

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();
});

Pas encore de billet sur le même sujet !

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 !

Pas encore de billet sur le même sujet !

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 !

Pas encore de billet sur le même sujet !

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 !

Demo

Pas encore de billet sur le même sujet !