L’un des objectifs de wikihelp est de rendre plus facile la rédaction de procédure et l’un des éléments qui est souvent requis dans l’élaboration de procédure est la numérotation des figures et des images. D’une façon similaire à la numérotation des titres, nous avons décider d’automatiser celle des images (intégré dans la révision 323 de wikihelp). Comme je trouve le concept intéressant, voici le comment :

/* Pour initialiser le compteur (dans un style parent)
counter-reset: figure 
*/
div.caption {
	border: 1px solid #DDD;
	text-align:center;
	margin: 0px 40px 40px;
	padding: 5px;	
}

div.caption p {
	font-style:italic;
	font-weight:bold;	
    counter-increment: figure; 
}

div.caption p:before {
    content: "Figure " counter(figure) " - " 	
}

Ainsi que le code jquery correspondant qui identifie les images, les places dans le div caption, ajoute le paragraphe avec le titre. La mention figure – X est géré par le volet CSS et non du coté javascript.

$("#img").each(function(){
    var image = $(this);
    image.wrap("<div class='caption'></div>");
    var div = $(this).parent().append('<p>' + image.attr('title') + '</p>');
});

Ce qui va annoter l’ensemble de images avec une légende : Figure X – Titre de l’image.

Pas encore testé sous d’autre navigateur que Google Chrome par contre….