Bidouilleur

SlideView est un plugin jQuery qui permet de créer un Diaporama ( slideshow).

Voici la démo.

Documentation et téléchargement.

Exemple de code jQuery :

1

$("#slideshow").slideView();

Twitter ce post

Showcase est un plugin jQuery qui permet de réaliser de jolis diaporamas d’accueil.

Pour voir les démonstrations c’est ici, pour télécharger le plugin c’est ici et la page officielle est ici.

Code :

1
2
3
4

$("#showCase1").showcase({
animation: { type: "fade",  interval: 4500,  stopOnHover: false },
navigator: { item: { width: "4px",  height: "4px" } }
});

Twitter ce post

jQuery Gestures est un plugin jQuery qui capture les mouvements de souris (clic gauche enfoncé ou non) de vos visiteurs; aussi ce système peut être intéressent pour réaliser des interfaces compatibles avec les nouveaux écrans tactiles ( de bureaux ou mobiles ).

Il détecte les différents mouvements possibles : vers la gauche, vers la droite, vers le haut, le bas, mouvements circulaires, zigzag…etc; ces mouvements deviennent ainsi des évènements .

Pour tester ce plugin c’est ici.

Exemple de code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(function(){
 
	$('*').gestures({
 
		callback:function(gesture)
		{
			if(gesture.string == 'circle')
			{
				alert('Circled!');
			}
			else if(gesture.string == 'zig-zag')
			{
				alert('Zig-Zagged!');
			}
		}
 
	});
 
});

Twitter ce post

jPlayer est un plugin jQuery qui permet de lire des MP3 dans votre page Web!

Et là je vois la question venir : « Comment ce fait-il que Javascript se mette du jour au lendemain à lire les MP3 ?? »

Et bien en fait ce plugin se sert d’un flash invisible sur la page qui permet la lecture des MP3!

Plusieurs styles de lecteurs sont possibles :

• Lecteur simple avec gestion du son.
• Lecteur de playlist
• Lecteur texte
• Lecteur avec barre de progression (jolijoli)
• Et le dernier arrivé : Lecteur compatible avec les thèmes  jQueryUI

Pour le tester et télécharger c’est ici.

Twitter ce post

jQuery Context Menu Plugin est comme son nom l’ indique un plugin jQuery qui va vous permettre d’intégrer à votre site un menu contextuel. Ce menu s’affichera par exemple lorsqu’ un utilisateur fera un clic droit sur votre page ou une zone définie de votre page.

Code HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ul id="myMenu" class="contextMenu">
    <li class="edit">
        <a href="#edit">Edit</a>
    </li>
    <li class="cut separator">
        <a href="#cut">Cut</a>
    </li>
    <li class="copy">
        <a href="#copy">Copy</a>
    </li>
    <li class="paste">
        <a href="#paste">Paste</a>
    </li>
    <li class="delete">
        <a href="#delete">Delete</a>
    </li>
    <li class="quit separator">
        <a href="#quit">Quit</a>
    </li>
</ul>

Code jQuery:

1
2
3
4
5
6

$(document).ready( function() {
   $("#selector").contextMenu({menu: 'myMenu'},
      function(action, el, pos) {
         alert('Action: ' + action);
   });
});

Twitter ce post

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