Marcofolio propose sur son blog un tutorial JQuery pour créer un « theatrical movie trailer » (que j’ai librement traduit en « bande-annonce de film »). Le résultat final est assez bluffant, on croirait une vraei animation flash ! Avec des fondus enchainés, avec du texte qui bouge…

Je pense juste que le poids total de l’anim est plus lourd que si elle avait été fait en flash, mais elle disponible même sans le flash (sur l’Iphone par exemple).

Une démo est disponible sur le blog ainsi que le tutorial (tout le code est également dispo en téléchargement).

Le plugin JQuery Tweetable permet d’afficher le flux de tweets d’un membre de Twitter ultra-facilement ! En effet pour cela il suffit simplement de créer un <div> vide en lui donnant un id (ici l’id est égal à « tweetable ») :

1

<div id="tweetable"></div>

Il faut ensuite importer le framework JQuery ainsi que le plugin dans la page HTML souhaité :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tweetable.js"></script>

Et enfin, il faut initialiser le plugin en sélectionnant le div voulu et en passant en option le nom d’utilisateur :

1
2
3
4
5
6
7

$(document).ready( function () {
		$('#tweetable').tweetable({ // on applique le plugin tweetable le bloc ayant pour id "tweetable"
                           username: 'arnaudk', // le nom d'utilisateur du flux Twitter à afficher
                           time: true,  // pour afficher ou non la date des tweets (date en anglais)
                           limit: 20 // nombre de tweets à afficher
                });
});

En bonus on peut ajouter quelques styles au code généré par le plugin JQuery :

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

#tweetable li {
	font-size:13px;
	background:url(images/twitter.png) no-repeat left ;
	padding-left:20px;
	margin-left:10px;
	margin-top:8px;
	list-style-type:none;
	border-bottom:1px dotted #333;
}
 
#tweetable .hash { 
        color:#0066CC; 
} 
 
#tweetable .reply { 
        color:#0066CC; 
}

Comme d’hab, j’ai préparé une petite démo avec le flux de mon Twitter (arnaudk). A noter que le plugin a été fait par theodin et est dispo en téléchargement sur son blog !
voir la demo de tweetable

Sur le blog aaronweyenberg.com, Aaron propose un bon tutorial pour personnaliser les cases à cocher (de type checkbox) en utilisant JQuery et le CSS. Le résultat obtenu est bien pensé et très graphique.

Il y a tous le code nécessaire dans le tutoriel : HTML, CSS et JQuery. Le JQuery est bien commenté donc pas de problèmes pour comprendre le code ou pour une éventuelle adaptation. Of course, le tutoriel est en anglais et il une démo est disponible.

Voir la démo

Tutorial JQuery trouvé sur le blog devirtuoso : créer un nuage de tag en (pseudo) 3d. Le tutorial (en anglais) est bien expliqué et donne tout le code HTML, CSS et JQuery. Il est très simple de reproduire (ou de repartir) du code donné, le code étant propre.

L’effet ainsi réalisé peut être une très bonn alternative au plugin pour flash (wp-cumulus pour WordPress) qui affiche aussi un nuage de tags en 3d. Mais cela reste du flash avec les désagréments que l’on connaît (la SEO notamment). Mais wp-cumulus reste au final plus joli et plus ergonomique.

A noter que l’on trouve aussi sur le blog une variante avec un effet de « vagues » (sympa mais pas très ergonomique !)

Le plugin JQuery Slideshow permet de créer un diaporama très simplement. Il n’y a qu’un seul effet de transition : le fondu enchainé (fadeIn/fadeOut) et un seul à paramètre à régler : le temps de défilement des images.

Pour le code HTML, c’est tout ce qu’il y a de plus simple, on prend un bloc (auquel on donne un id pour le sélectionner avec JQuery) dans lequel on ajoute des images (avec la balise… <img /> !) :

1
2
3
4
5
6
7
8
9

<div id="slideshow">
	<img src="image1.jpg" alt="image 1" />
	<img src="image2.jpg" alt="image 2" />
	<img src="image3.jpg" alt="image 3" />
	<img src="image4.jpg" alt="image 4" />
	<img src="image5.jpg" alt="image 5" />
	<img src="image6.jpg" alt="image 6" />
	<img src="image7.jpg" alt="image 7" />
</div>

Et pour le JQuery, c’est aussi simple car il n’y a qu’un seul paramètre. Le plugin Slideshow s’occupe de tout le reste :

1
2
3
4
5

$(document).ready(function() {
	$('#slideshow').slideshow({ // on applique le diaporama sur le bloc ayant pour id 'slideshow'
		timeout: 1500 // chaque image restera affiché 1 500 millisecondes (soit 1.5 seconde)
	});
});

Un plugin tout simple mais diablement efficace !