PRESENTATION 
Le plugin Annotations vous permet de visualiser et modifier des annotations  (texte, images, vidéo, etc) sur des images génériques (cartes, images, photos). 
Les annotations sont associées à une image spécifique et indiqué par l'utilisation d'icônes personnalisables ( "marqueurs"). Le texte des annotations peut être affiché soit au survol (hover) du marqueur, soit en cliquant dessus. 

PREMIERS PAS 
Comme avec tous les plugins, nous allons procéder au téléchargement du zip (lien), sa décompression et les charger dans le dossier plugins de votre site SPIP. 

Après avoir activé le plugin via l'interface privée, vous aurez besoin pour préparer les modèles sur lesquels vous voulez utiliser la fonction d'annotation, comme nous le verrons plus tard. 

METHODE "DE GESTION DE DONNÉES DE NOTES 
Le plugin vous permet de lire les annotations entré à partir de n'importe quel support de stockage, comme une table de votre base de données, mais pas tous. En fait, le plugin offre une interface logicielle générique à la lecture de ces données, en utilisant le format pour l'échange de données client-serveur JSON (http://json.org/). 
Le plugin offre 2 mises en œuvre: 
1) Lire et écrire des données dans une table ( "spip_annotations") - par défaut 
2) Lire et écrire des données par le biais de forums de SPIP 
Le JSON fichiers, comme d'habitude des fichiers texte, peuvent également être créés par la rédaction de modèles de cycles et SPIP en utilisant des repères. 
Du point de vue de l'éditeur, que les images enregistrées peuvent être insérés dans le corps d'un article, en utilisant le tag <anno_docXX>, où XX est le nombre de charges dans un article, ou que les documents joints. Dans ce dernier cas, il sera nécessaire de préparer des modèles de SPIP permet de détecter la présence d'images annotées et activer les fonctionnalités du plugin. 

PREPARATION DES MODÈLES 
Tous les modèles contenant des images enregistrées doivent nécessairement présenter les placeholder # INSERT_HEAD <head> l'intérieur de la balise pour indiquer un SPIP pour charger tous les scripts nécessaires pour le bon fonctionnement des annotations (la librairie javascript jQuery et jQuery plugins) 

Utilisation des photos note ci-jointe 
Si vous utilisez des images annotées ci-joint, pas inséré dans le corps d'un article, vous devez ajouter à son tag <IMG> l'attribut id = "annotated_mapXX" où XX est le numéro de la déclaration. 

Gestion de documents grâce à l'ajout de la table "spip_annotations" 
Le plugin offre une fenêtre de gestion de documents, consultable à partir de la partie publique du site et les utilisateurs enregistrés seulement. Pour chaque image enregistrée "joint" (non présent dans le corps) est nécessaire d'ajouter le code suivant pour afficher le lien vers la fenêtre de gestion: 
[(# (Statut }|=={ SESSION 0minirezo }|?{'',''}) 
<div Class="spip_doc_descriptif"> 
<a class = "annotate_link" id = "map_ # ID_DOCUMENT" href = "#" title = "<: annotations: manage_points_title :>"><: annotations: manage_points> </ a> 
</ Div> 
] 

Notez que le filtre == () 0minirezo gestion active des dossiers pour chacun des administrateurs. 
En changeant la valeur du filtre, vous pouvez personnaliser le type d'utilisateur autorisé à gérer les annotations 
Enfin, nous devons ajouter, immédiatement avant la balise de fermeture <body> le code suivant, qui est la gestion de la fenêtre elle-même: 
<INCLUDE{fond=inc-annotationswindow}> 

En résumé: 
Insérez-le placeholder # INSERT_HEAD 
-Pour les images enregistrées joints entre les id "annotated_mapXX" à chaque image 
Si l'on adopte le mode de fonctionnement avec le "spip_annotations», insérer le lien vers la fenêtre de code de gestion et de la gestion de la fenêtre avant de fermer le corps 

Le plugin est un modèle de l'article (article.html) déjà changé à titre d'exemple. 
Gestion des annotations par forum 
La gestion par le biais du Forum, vous permet d'utiliser les forums pour SPIP de lire et d'écrire des annotations. 
Pour ce faire, vous pouvez utiliser l'espace 
# FORMULAIRE_ANNOTATIONS (# SELF) 
qui dispose d'un formulaire personnalisé pour l'entrée de la mention. 

Il est évident que, selon l'effet désiré, le webmaster mai ne voulez pas montrer tous les messages du forum, mais simplement la remarque figurant dans les éliminer, par conséquent, tous les cycles sur le forum de ses modèles. 

Une autre modification consiste à modifier le fichier config_annotations.js.html, dans laquelle les lignes sont commentées comment activer le forum. Il suffit de renverser les commentaires sur les lignes suivantes. 

loadCoordsAnnotations: "# URL_PAGE) (show_image_annotations" 
/ / LoadCoordsAnnotations: "# URL_PAGE) (show_image_annotations_forum" 
......... 
loadAnnotationText: "# URL_PAGE) (get_annotation_text" 
/ / LoadAnnotationText: "# URL_PAGE) (get_annotation_text_forum" 
Afficher info-bulle avec des annotations ou de superposer plusieurs fenêtres 
E 'peut changer le mode d'affichage de l'inversion de la annotée des observations de la manière suivante, à la fin du fichier cfg_annotations.js.html 
jQuery.carto.loadMarkersWithTooltip (); 
/ / JQuery.carto.loadMarkersWithOverlay (); 
DOCUMENTATION DE LA PLUGIN jQuery annotations 

Définissez un marqueur personnalisé: 
var marker = Mapmarker (( 
/ / La balise <img> être utilisé comme marqueur 
Src: "<img src ='..' width ='32 'height ='32' /> " 
/ / Facultatif, si le marqueur n'est pas rectangulaire, vous pouvez spécifier une carte avec html / / les coordonnées de type «poly» 
la carte: "<map> <= Coords'11 domaine, 29,10,25,8,21,6,16,4,12,1,9,7,8,7,0,15,0,15,8 , 22,9,18,12,17,15,15,19,13,23,11,31 "shape =" poly "alt ='' 'href =' javascript: void (0 )'/></ carte > " 
/ / Facultatif, indiquer les coordonnées du marqueur qui coïncide avec le point / / si le marqueur est ajoutée (avec un marqueur ajouté aux coordonnées x, y / / image, a son coin inférieur droit coïncide avec ce point) 
HotSpot: [32.32] 
), 
); 
jQuery.extend (jQuery.carto, marqueur); 
Réglez l'url à la lecture des données et des images du service: 
jQuery.extend (jQuery.carto, ( 
Cfg: ( 
/ / Url pour charger les coordonnées des annotations pour une image donnée 
loadCoordsAnnotations: "# URL_PAGE) (show_image_annotations" 
/ / Url pour charger le texte d'une remarque 
loadAnnotationText: "# URL_PAGE) (get_annotation_text" 
/ / Image vide 
EmptyImage: "# CHEMIN (images /) rien.gif" 
/ / Image upload 
LoaderImage: "# CHEMIN (images /) loader.gif" 
) 
)); 
JSON format de fichier traité par loadCoordsAnnotations: 
( "Documents": (/ / les données d'image 
/ / Une propriété du même nom à votre image pour chaque image 
"1": ( 
"width": 200, / / taille en RESIZE PAS px 
"Hauteur: 200 
), 
"2": ( 
"Largeur": 200, 
"Hauteur: 200 
), 
..... 
), 
"ids": [/ / tous les dossiers 
( 
"Id_annotation": 1, / / id annotation 
"Id_document": 1, / / id de document 
"Titre": "title", / / titre de remarque 
"x": 12, / / x coordonner l'approbation PAS RESIZE 
"y": 14 / / y coordonner sur le visa ne sont pas l'échelle 
), 
( 
"Id_annotation": 2, 
"Id_document": 1, 
"Titre": "title", 
"X": 32, 
"Y": 48 
), 
...... 
]) 

Format de fichier loadAnnotationText par: 
HTML standard 
Implementations proposé en cliquant sur un lien avec classejqmClose causes de la fermeture de la fenêtre d'aide ou de superposition. 

API 

jQuery.carto.loadMarkers (root, callback, params) 
Chargement des annotations pour les images enregistrées dans un tag de la page. 
Sujets: 
root (sélecteur jQuery, jQuery élément ou objet) 
À partir de laquelle l'élément de base à la recherche d'images enregistrées (tag <img> avec id type annotated_mapXX où XX est l'id de l'image) 
callback (fonction de fonction de signature (données, images)) 
fonction de compléter le chargement, le chef de l'affichage des marqueurs et la connexion des événements pertinents. 
Sujets: 
"Data" est l'objet retourné par le fichier JSON loadCoordsAnnotations 
des images est un objet de hachage jQuery contenant les images enregistrées sont à l'intérieur de la racine, 
dans lequel le nom est l'id de ( "1": objet jQuery image 1, "2": objet jQuery image 2) 
params (hash (nom: valeur)) (facultatif) 
d'autres paramètres transmis dans le dossier de demande loadCoordsAnnotations 

jQuery.carto.loadMarkersWithTooltip (root, params) 
Aide pour le téléchargement de la fonction annotations pour les images enregistrées dans un tag de la page et d'afficher avec info-bulle. 
Sujets: 
root (sélecteur jQuery, jQuery élément ou objet) 
À partir de laquelle l'élément de base à la recherche d'images enregistrées (tag <img> avec id type annotated_mapXX où XX est l'id de l'image) 
params (hash (nom: valeur)) (facultatif) 
d'autres paramètres transmis dans le dossier de demande loadCoordsAnnotations 

jQuery.carto.loadMarkersWithOverlay (root, params) 
Aide pour le téléchargement de la fonction annotations pour les images enregistrées dans un tag de la page et de fenêtre d'affichage overlay. 
Sujets: 
root (sélecteur jQuery, jQuery élément ou objet) 
À partir de laquelle l'élément de base à la recherche d'images enregistrées (tag <img> avec id type annotated_mapXX où XX est l'id de l'image) 
params (hash (nom: valeur)) (facultatif) 
d'autres paramètres transmis dans le dossier de demande loadCoordsAnnotations 

jQuery.carto.loadCoordAnnotations (ids, callback, params) 
Fonction pour transférer les annotations pour les images enregistrées avec l'identifiant spécifié. 
Thèmes 
ids: (tableau d'entiers) 
l'id de l'image pour télécharger les annotations 
callback (fonction de fonction de signature (de données)) 
la fonction callback à télécharger achevé qui est passé comme un argument de l'objet 
l'objet JSON renvoyé par le fichier indiqué par jQuery.carto.cfg.loadCoordAnnotations 
params (hash (nom: valeur)) (facultatif) 
d'autres paramètres passés à la demande du fichier indiqué par jQuery.carto.cfg.loadCoordAnnotations 
L'identification de ces images sont transmises en tant que paramètres nommés id_document [] 

jQuery.carto.displayMarkers (points, images, id_prefix, callback) 
ou 
jQuery.carto.displayMarkers (points, images, callback) 
Fonction pour afficher les annotations sur les images. 
Thèmes 
points (objet JSON renvoyé par le fichier indiqué par jQuery.carto.cfg.loadCoordAnnotations) 
images (hash) 
jQuery est un objet de hachage contenant les images enregistrées sont à l'intérieur de la racine, 
dans lequel le nom est l'id de ( "1": objet jQuery image 1, "2": objet jQuery image 2) 

id_prefix (chaîne de caractères par défaut: "map_marker"): 
       de votre code pour définir la marque et d'autres éléments créés par cette fonction. 
       Utile de montrer plusieurs fois sur une même page les marqueurs 
callback (fonction de fonction de signature (point, attr)): 
développe les attributs pour être ajouté à la marque pour un point donné et le rendement de modification 
Thèmes 
point (point objet points.ids matrice) 
attr (valeur de hachage de l'attribut name) 
      Exemple: 
Fonction (point, attr) ( 
attr.title = point.title + ", cliquez ici pour afficher les données"; 
Retour attr; 
) 

jQuery.carto.addMarker (sélecteur, coord, attr) 
Ajoute un marqueur à l'image. 
Sujets: 
Selector (sélecteur de jQuery, jQuery élément ou objet) 
représente l'image que vous ajoutez un marqueur 
coord (point (xy: [x, y])) 
coordonnées du lieu d'ajouter le point 
attr (hash (nom: valeur)) 
les attributs que vous insérez la balise marqueur