Bidouilleur

GcColor est un plugin jQuery qui vous permet d’ agrémenter vos champs d’un color picker. Comme vous pouvez le voir ci-dessous, ce plugin est pratiquement digne de notre bon vieux photoshop.

Code jQuery:

1

$('input.color').gccolor();

A noter que ce plugin s’ appui sur un autre plugin de color picker qui se nomme tout simplement Color picker.

Twitter ce post

Le plugin Captify vous permet de légender vos photos de bien belle manière, en effet le texte de description de la photo est certes caché mais il s’ affiche au survol de la photo dans un fond en semi-transparence.En voici un avant goût ci-dessous.

Démo.

Téléchargement.

Code HTML:

1
2

<img src="image.jpg" class="captify" rel="legende1" />
<div id="legende1"> La légende de mon image .</div>

Code jQuery:

1
2
3
4
5
6
7
8
9
10
11
12

$('img.captify').captify({
		// toutes ces options sont facultatives
		speedOver: 'fast',
		speedOut: 'normal',
		hideDelay: 500,	
		animation: 'slide',		
		prefix: '',		
		opacity: '0.7',					
		className: 'caption-bottom',	
		position: 'bottom',
		spanWidth: '100%'
	});

Twitter ce post

Le plugin jQuery mbGallery va vous permettre de réaliser de jolis diaporamas photo de vos albums sur votre site.

Le diaporama est entièrement configurable, en voici la preuve par le petit code jQuery d’exemple:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

$(”#g1?).mbGallery( {
   galleryMaxWidth:0,
   galleryWidth:300,
   galleryHeight:300,
   galleryColor:”#333?,
   galleryFrameBorder: 12,
   galleryFrameColor:”#fff”,
   thumbStripPos: “right”,
   thumbStripWidth:250,
   thumbSelectColor: “#fff”,
   thumbOverColor : “#cccccc”,
   thumbStripColor: “#333333?,
   thumbsBorder: 6,
   thumbHeight:70,
   headerOpacity: .8,
   labelColor: “#333333?,
   labelColorDisactive:”#333333?,
   labelTextColor: “#ffffff”,
   labelTextSize:”11px”,
   labelHeight:20,
   startFrom:0,
   fadeTime: 500,
   autoSlide:true,
   autoSize : true,
   slideTimer: 3000,
   iconFolder: “elements/white”,
   startTimer:0
}
)}

Pour le code HTML suivant:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="”g1?" class="”galleryCont”">
     //image1
     <img class="”imgThumb”" src="”LR/01.jpg”" alt="”&quot;" />     //miniature
     <img class="”imgFull”" src="”HR/01.jpg”" alt="”&quot;" />     //photo
<div class="”imgDesc”">Entrance view of the SESC Avenida Paulista, São Paulo, Brazil (Photo by Noah Stolz)</div>
//légende
     //image2
     <img class="”imgThumb”" src="”LR/02.jpg”" alt="”&quot;" />
     <img class="”imgFull”" src="”HR/02.jpg”" alt="”&quot;" />
<div class="”imgDesc”">Fórum Discussões Collaterais - Collateral Talks</div>
//image3
     <img class="”imgThumb”" src="”LR/04.jpg”" alt="”&quot;" />
     <img class="”imgFull”" src="”HR/04.jpg”" alt="”&quot;" />
<div class="”imgDesc”">Runa Islam, “Turn (Gaze of Orpheus)”</div>
</div>

Twitter ce post

KeyFilter est un plugin Jquery qui permet de filtrer les entrées utilisateur. Grâce à ce plugin vous pouvez par exemple interdire les utilisateurs d’ entrer une lettre dans un champs qui doit être rempli par des chiffres. Le filtre est en fait défini par une expression régulière.

Code HTML:

1

<input class="mask-num" type="text" />

Code Jquery:

1

$('.mask-num').keyfilter(/[0-9]/i);

Démonstration.

Twitter ce post

Le plugin Jquery Jpolite vous permet de créer un portail à la « Netvibes » ou « igoogle« , les effets de fondu et de slide sont au rendez-vous… et les requêtes ajax le sont aussi, bref le parfait petit site à la web 2.0!

De plus ce plugin s’avère très léger.

Si vous souhaitez créer un site un peu plus complet, et toujours façon « netvibes », je vous conseille de jeter un oeil sur le script de Portaneo.

Attention tout de même à ce genre de script! Si vous souhaitez obtenir un bon référencement dans les moteurs de recherche, ce n’est pas la bonne solution car les contenus sont chargés via ajax et ne sont donc pas en dur dans le code HTML…

Twitter ce post

Le Plugin rCorners vous permet d’arrondir les angles de vos images, l’astuce est en fait très simple, le plugin se sert d’une image qui représente un rectangle transparent à coin arrondi comme celle ci-dessous(Le fond de l’image à été volontairement mis en noir), pour la superposer avec l’image en question.

Exemple de Code:

1
2
3
4
5

$('img.rcorner').rcorner({
     bgImageLocation: 'images/background.gif',
     bgImageWidth: '30px',
     bgImageHeight: '30px'
});

Ce qui donne:

Télécharger le plugin

Twitter ce post

Le plugin Google Charts vous permet de générer des graphiques avec Jquery via l’ API Google Chart, cette API Google permet la  création de graphique de tout types (Camemberts ,Lignes ,Barres ,Nuages de points, carte géographiques, etc…) avec comme données  des valeurs insérées dans l’URL de l’API, exemple : http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World, donne :

Ce plugin permet donc de créer ces graphiques dynamiquement et sans se préoccuper de l’agencement des données dans l’Url.

Exemple de Code :

1
2
3

$('#scatterChart').gchart($.gchart.scatter(
    [[10, 80], [30, 40, 50], [60, 70, 25], [90, 20], [20, 10],
    [40, 90], [20, 50, 75], [50, 70, 75], [90, 30], [70, 50]]));

Qui donne :
Télécharger ce plugin.

Twitter ce post

Vous devez sans doute connaître le plugin WordPress WP-cumulus qui est très à la mode en ce moment  et qui permet d’afficher  un nuage de mots clés dynamique et en 3d qui tourne en fonction de la position de la souris.

Le petit ou gros problème de ce plugin est que le nuage est généré en flash, ce qui peut poser quelques petits problèmes de référencement..

Pour remédier à cela je vous propose un plugin Jquery qui fait exactement le même nuage mais en HTML /Javascript.

Code HTML:

1
2
3
4
5
6
7
8

<div id="tagShpere">
<ul>
	<li><a href="#">Mot clé 1</a></li>
	<li><a href="#">Mot clé 2</a></li>
.......
	<li><a href="#">Mot clé n</a></li>
</ul>
</div>

Code Javascript :

1
2
3
4
5
6
7
8
9

$(document).ready(function(){
		$('#tagsphere').tagSphere({
			height: 280,
			width: 280,
			slower: 0.65,
			radius: 120,
			timer: 50
		});
	});

Télécharger le plugin.

Lien.

Et un exemple fait maison ici.

Twitter ce post

Reflection est un plugin Jquery qui va vous permettre de générer à la volée un effet de reflet sur vos images. Ce plugin est basé sur le script reflection.js qui est compatible sur de nombreux navigateurs ( Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+)

Effet de reflet avec Jquery

Code :

1

$("#photo1").reflect();

La Documentation , la démonstration et téléchargement sont sur cette page.

Twitter ce post

ListNav est un plugin Jquery qui vous permet de transformer une liste HTML(<ul><li>test</li></ul>), en une barre de navigation alphabétique. Ce plugin est très utile si vous devez afficher de longues listes interminables.

Il permet aussi de visualiser le nombre d’éléments contenus dans une lettre au passage de la souris sur celle-ci, et il grise les lettres n’ayant aucun élément.

Barre de navigation alphabétique

Code :

1

$('#demoOne').listnav();

Voir la démonstration de ce plugin .

Consulter la documentation et télécharger le plugin.

Twitter ce post