fév 09

Nuage de tags(mots clés) 3d et dynamique en Jquery

Jquery Add comments



Vous devez sans doute connaître le plugin WordPress WP-cumulus qui est très à la mode en ce moment  et qui permet d’afficher  un nuage de mots clés dynamique et en 3d qui tourne en fonction de la position de la souris.

Le petit ou gros problème de ce plugin est que le nuage est généré en flash, ce qui peut poser quelques petits problèmes de référencement..

Pour remédier à cela je vous propose un plugin Jquery qui fait exactement le même nuage mais en HTML /Javascript.

tags-nuage-cloud-sphere

Code HTML:

1
2
3
4
5
6
7
8

<div id="tagShpere">
<ul>
	<li><a href="#">Mot clé 1</a></li>
	<li><a href="#">Mot clé 2</a></li>
.......
	<li><a href="#">Mot clé n</a></li>
</ul>
</div>

Code Javascript :

1
2
3
4
5
6
7
8
9

$(document).ready(function(){
		$('#tagsphere').tagSphere({
			height: 280,
			width: 280,
			slower: 0.65,
			radius: 120,
			timer: 50
		});
	});

Télécharger le plugin.

Lien.

Et un exemple fait maison ici.

Post to Twitter Twitter ce post

Mots-clefs :, , , , , , , , , , ,

14 Responses to “Nuage de tags(mots clés) 3d et dynamique en Jquery”

  1. laf Says:
    septembre 8th, 2009 at 17 h 15 min

    J’ai beau tourner ça dans tous les sens, impossible de le faire « tourner ». Au pire, j’ai juste la liste des « Mot clé » qui s’affiche… :-( un exemple de mise en oeuvre serait pratique.
    Merci quand même pour cet article!

  2. admin Says:
    septembre 12th, 2009 at 14 h 42 min

    Salut laf,
    Voici un petit exemple que je viens de réaliser : http://bidouilleur.com/wp-content/uploads/2009/09/tagsphere-3d-tags.rar
    ;-)

  3. mikah Says:
    octobre 28th, 2009 at 8 h 50 min

    Bonjour,

    beau travaille cela marche correctement. Seulement un détails, mon nuage de mot clé tourne peut être 10 fois plus vite que le tiens, alors que je lui ai mis les même options. Une idée d’où cela pourrait venir ?

    Cdlt,

  4. Pedro Says:
    octobre 31st, 2009 at 19 h 02 min

    Comment faire pour que les mots n’apparaissent pas sous forme de lien (en bleu, souligné) ?
    Faut toucher dans le .js ?

  5. admin Says:
    novembre 1st, 2009 at 0 h 22 min

    Pour mikah : je ne vois pas pourquoi ton nuage tourne plus vite , si tu as les même options de vitesse que l’exemple… C’est peut être un autre Javascript de ta page qui met le boucan…?

    Pour Pedro : et bien tu changes le style de tes liens en CSS :-)

  6. boulet_sensei Says:
    novembre 9th, 2010 at 5 h 35 min

    Génial, exactement ce que je cherchais !
    Les liens ne semblent pas indispensables. Pour gérer la recherche, un petit form avec un hidden, et le tour est joué.

    $(document).ready(function(){
    $(‘#tagsphere’).tagSphere({
    height: 250,
    width: 250,
    slower: 0.65,
    radius: 60,
    timer: 50
    });

    $(« #tagsphere ul li « ).click(function(){
    $(« #searchWord »).val($(this).html());
    document.forms["searchkeyword"].submit();
    });
    });

    Et en HTML :

    Keywords

    Java
    PHP

    Mis en place en 2 minutes montre en main!

  7. Kevin P Says:
    novembre 11th, 2010 at 15 h 56 min

    Salut !

    Merci beaucoup pour ce tuto et ces codes, cela marche (presque) à merveille chez moi !

    Je dis presque car j’ai un petit soucis; les mots n’arrêtent pas la rotation si je vise le centre de la « sphère » avec ma souris dans la div.

  8. DuSk Says:
    novembre 13th, 2010 at 0 h 14 min

    Attention, à rectifié en « tagSphere »

  9. Guillaume Says:
    novembre 28th, 2010 at 18 h 51 min

    Un régal ce ptit script et super simple a faire fonctionner on l’a mis sur notre page d’accueil. Merci Bidouilleur

  10. Ervé.Do (Do-Zone) Says:
    février 21st, 2011 at 15 h 27 min

    Bonjour !

    J’aimerai pouvoir utiliser ce nuage de tags mais je ne comprends très bien comment je dois faire pour l’installer sur mon blog. Merci de m’expliquer la démarche à suivre car ça m’a l’air vraiment bien pour l’avoir vu sur d’autres blogs.

    Cordialement

    Ervé

  11. Gorphals Says:
    avril 19th, 2011 at 10 h 57 min

    Merci beaucoup pour ce tuto et code, vraiment bien fait, et très simple d’utilisation! Depuis le temps que je cherchais, je tombe enfin dessus, mille merci !

  12. cebelab Says:
    juin 11th, 2011 at 8 h 38 min

    Merci! Ca fait un moment que je cherchais ça.
    Le seul truc qui m’agace (pardon (: ) c’est que, comme dans son pendant flash, la rotation s’arrête au centre du cercle… Il n’y aurait pas moyen de faire en sorte que ça dépende de la position de la souris? Je pense que ce serait plus « user-friendly »! Si j’ai du temps j’essaierai de me pencher là dessus, mais je ne suis pas très intuitif, en maths…

  13. Butch Says:
    août 30th, 2011 at 7 h 58 min

    Super ce code. Merci.
    Est-ce qu’il est possible de faire en sorte qu’il tourne tout seul au départ ?
    sans passer la souris en hover ?

  14. Pedros Says:
    novembre 18th, 2011 at 17 h 00 min

    je rajouterai même une petite correction que j’ai du faire pour que le truc tourne bien. Car sans ça il faut que le nuage soit fixé en hauit à gauche de l’écran.
    Je décale d’autant que le offset left et top du div conteneur.

    Vers la ligne 76 du fichier JS remplacer (ajouter la position offset et la soustraire du mouseX et du mouseY.
    Si qqun peut confirmer ..

    var tagContPosition = tagCont.offset();
    tagCont.mousemove(function(e){
    curState.mouseX = e.pageX – this.offsetLeft – tagContPosition.left;
    curState.mouseY = e.pageY – this.offsetTop – tagContPosition.top;

    });

Leave a Reply