Bidouilleur

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

Preloaders.net vous permet de générer des preloaders gif en 3D !

Pour ceci choisissez un des nombreux preloaders 3D, puis choisissez sa couleur de fond, sa couleur, sa taille, puis la vitesse de l’animation, cliquez sur « Generate » et le tour est joué!

Exemples:

Lien du générateur.

Aperçu :

Générateur de preloaders(image d'attente pendant un chagement) en 3D

Le générateur propose aussi des dizaines de preloaders en 2D. De quoi faire patienter vos visiteurs en toute beauté!

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

C’est très simple, rendez vous sur Reflectionmaker.com, et entrez l’ Url  de votre image si elle se trouve sur le Net sinon uploadez la , ensuite réglez la taille de l’effet reflet ainsi que la couleur de fond de l’effet, et enfin cliquez sur « generate »…

Exemple :

Avant :

Après :

Twitter ce post