Bidouilleur

Si vous aussi vous souhaitez créer vos Pop-in à la « web 2.0″ je vous conseille le plugin Jquery nyroModal, il permet de créer des Pop-in ou même des galeries d’ images (ou vidéos,textes… )extrêmement facilement et avec un effet assez réussi.

Ce plugin réserve tout un tas de surprises, pour les découvrir je vous conseille de jeter un œil à la documentation.

Exemple de code Pour créer une galerie multimedia(photos, vidéos youtube):

Code Jquery:

1

$('a.nyroModal').nyroModal();

Code HTML:

1
2
3
4
5

<a id="imgFiche" class="nyroModal" title="UCLA" rel="gal" href="img/img1.jpg">Gallery Img 1</a>
<a class="nyroModal" title="3rd Street Promenade by Night" rel="gal" href="img/img2.jpg">Gallery Img 2</a>
<a class="nyroModal" title="Hockey Goal fight" rel="gal" href="http://www.youtube.com/watch?v=lddUnv1R5y0">Youtube in gallery</a>
 
<a class="nyroModal" title="Sunset at Santa Monica" rel="gal" href="img/img3.jpg">Gallery Img 3</a>

Téléchargement.

Et si ce plugin ne vous convient pas vous pouvez toujours jeter un œil sur le plugin lightbox ou encore thickbox.

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

Pixastic est une librairie Javascript qui vous permet d’appliquer des filtres sur les images de votre page d’un simple clic et sans passer par un script PHP!

Pixastic exploite les nouvelles possibilités de dessin ( canvas) implémenté dans HTML5, elle n’est donc supportée que par les navigateurs suivants :  Firefox, Opera , Safa­ri et les dernières versions de WebKit. Mais cette liste devrait vite s’agrandir…

Voici toutes les possibilités(in english) qu’offre cette librairie de traitement d’ image :

• Blend
• Blur
• Blur Fast
• Brightness/Contrast
• Color Adjust
• Crop
• Desaturate
• Edge Detection
• Edge Detection2
• Emboss
• Flip Horizontally
• Flip Vertically
• Glow
• Histogram
• Hue/Saturation/Lightness
• Invert
• Laplace Edge Detection
• Lighten
• Mosaic
• Noise
• Posterize
• Pointillize
• Remove Noise
• Sepia
• Sharpen
• Unsharp Mask

Pixastic - Librairie Javascript de traitement d' image

Pixastic possède son plugin Jquery !

Exemple de Code avec Jquery :

1
2
3
4
5
6
7
8
9
10

// invert the image with id="prettyface"
$("#prettyface").pixastic("invert");
 
// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");
 
// chained blur and a regional emboss, see image further down
$("#myimage")
	.pixastic("blurfast", {amount:0.2})
	.pixastic("emboss", {direction:"topleft", rect:{left:50,top:50,width:150,height:150}});

Pour télécharger la librairie rendez-vous ici.

Vous pouvez aussi la tester sur le Pixastic editor!

Amusez-vous bien!

Twitter ce post

En attendant  l’ implémentation du CSS3 (qui nous permettra de faire tourner les éléments d’une page) dans tous les navigateurs, voici un petit plugin Jquery qui va vous permettre d’appliquer un effet de rotation sur vos images comme ci-dessous..

Le plugin est compatible  Opera, Safari, Chrome, FireFox mais aussi IE6, IE7 si vous ajoutez le plugin ExCanvas.

Code:

1
2
3

$(document).ready(function(){
   $('#image').rotate(-25);
});

Twitter ce post