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
de arnaud
On juillet 14, 2011
dans JQuery
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.