Système de tag d’images avec JQuery image annotate

Vous souhaitez mettre en place un système de tag d’image comme sur Flickr ou Facebook, mais vous ne savez même pas par où commencer. jQuery Image Annotation Plugin, couplé à Jquery et JQuery UI, vous permet de faire ceci sans aucune difficulté.

Le plugin permet d’ajouter, de modifier, et de supprimer des annotations sur l’image. J’ai fait le test avec la dernière version 3.2 et le résultat obtenu est plutôt soigné. Voici le code HTML / JavaScript nécessaire pour utiliser cette librairie.

 <html>       <head>           <style type="text/css" media="all">@import "./css/annotation.css";</style>           <script type="text/javascript" src="./js/jquery-1.3.2.js"></script>           <script type="text/javascript" src="./js/jquery-ui-1.7.1.js"></script>           <script type="text/javascript" src="./js/jquery.annotate.js"></script>             <script language="javascript">                  $(window).load(function() {                     $("#toAnnotate").annotateImage({                       editable: true,                       useAjax: false,                       notes: [ { "top": 286,                                   "left": 161,                                   "width": 70,                                   "height": 70,                                   "text": "Edites moi !",                                   "editable": false },                                { "top": 134,                                   "left": 179,                                   "width": 100,                                  "height": 80,                                   "text": "Ne m'édites pas !",                                   "editable": true } ]                                       });                  });              </script>          </head>       <body>              <div class="main-content">               <img src="./monImage.png" id="toAnnotate" />           </div>          </body>   </html>  

En conclusion il s’agit d’un plugin très intéressant, mais il est destiné à un nombre très restreint de projets, du fait de sa spécificité.

Ajuster la taille de vos textareas en fonction du contenu

AutoResize est un plugin JQuery qui permet de faire un textarea extensible en fonction du contenu, comme le fait actuellement Facebook pour les commentaires. Ceci évite les pages de formulaire où un textarea fait 15cm sur 8, le truc pas esthétique quoi…

Voici comment appliquer le plugin sur un textarea ayant pour id « comment ».
Après, libre à vous de changer le sélecteur pour l’appliquer à tous vos textareas, ou juste à ceux d’une classe précise.

$().ready(function(){
$('#comment').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});
});

Vous l’aurez compris, ce plugin s’adresse aux développeurs soucieux de l’ergonomie de leur site Internet et qui en ont marre de voir des barres de scroll apparaître dans leurs textareas.

Calcul de temps à la Facebook ou Twitter

Si vous avez déjà développé un chat, un livre d’or ou tout autre type de moyen de feedback, vous avez été confronté au problème de l’affichage de la date de publication du message. Comment faire pour qu’elle soit affichée sans avoir une date classique et barbante comme : 29/06/2011 15h26 mais plutôt quelque chose du style : « il y a moins d’une minute », comme le font Twitter ou Facebook par exemple ?

On imagine déjà du parsage, des algos…
Eh bien en fait oui, mais pas besoin de le faire vous-mêmes, timeago peut le faire à votre place.

On pourra apprécier la simplicité d’utilisation du plugin, pour un résultat assez simple mais correct.

Voici l’utilisation la plus utile que l’on peut faire du plugin.

<html>
	<head>
		http://jquery.min.js
		http://timeago.js
		<script>
			$(document).ready(function() {
			jQuery("abbr.timeago").timeago();
			});
		</script>
	</head>
	<body>
		<abbr class="timeago" title="July 17, 2008">2 years ago</abbr> <br/>
		<abbr class="timeago" title="2011-06-17">2 years ago</abbr> <br/>
		<abbr class="timeago" title="2011-01-17T09:24:17Z">2 years ago</abbr>
		<hr/>
	</body>
</html>

Le résultat obtenu (aujourd’hui) est le suivant :

  • Il y a 2 ans
  • Il y a 12 jours
  • Il y a 5 mois

Vous remarquerez au passage l’utilisation de différents types de format de date.

Afin d’avoir le résultat en français j’ai traduit les quelques mots clés contenu dans la librairie. L’archive que je propose contient donc la version française.

La petite particularité est l’option :

jQuery.timeago.settings.allowFuture = true;

Qui permet de faire une sorte de décompte pour un évènement. Je n’ai pas encore trouvé d’application pertinente mais il y a de l’idée 😛