Ajouter des étiquettes d'info-image simples avec Taggd

Vous savez comment Facebook vous permet étiquettes d'étiquettes en photos? bien, Taggd est un peu comme l'équivalent CSS / JS utiliser des points pour noter où les info-bulles doivent apparaître sur une image.

La bibliothèque est totalement gratuite et ne nécessite aucune dépendance comme jQuery. Il fonctionne sur JavaScript vanille pure, et c'est super facile à mettre en place.

Vous pouvez en apprendre un peu plus de la page d’accueil de Taggd qui comprend une démo et quelques étapes de base pour avoir commencé.

Il y a aussi un lien vers le documentation en ligne en utilisant Doclets, une petite application Web soignée faite pour la documentation JS. Vous pouvez rechercher les versions de Taggd, ou parcourir la version actuelle dans la branche master.

De là, vous aurez un énorme liste de propriétés vous pouvez utiliser. Chaque document est divisé en fonctions qui opérer sur l'image (tel que ajouter une étiquette() ou getTag ()) suivi de fonctions qui vous aident manipuler des balises spécifiques (tel que setPosition ()).

Encore une fois, tout fonctionne sur JavaScript vanille de sorte que vous n'avez pas à vous soucier des problèmes de syntaxe.

Pour commencer consultez le repo GitHub, et suivez les instructions d'installation.

Vous venez d'ajouter les fichiers Taggd CSS et JS Dans votre section , et alors créer une nouvelle instance des éléments Taggd. Ceux-ci peuvent être définis un par un ou dans un tableau.

ensuite les annexer à une image, et hop! Vous êtes prêt à partir.

J'aimerais voir fonctionnalités supplémentaires pour personnaliser les étiquettes, et changer leur forme. Ce serait génial de créer une balise carrée pour entourer un objet plutôt qu'un petit point rose. Mais pour une bibliothèque libre avec zéro dépendance, je ne peux pas me plaindre beaucoup.

Jusqu'ici cette bibliothèque est faite pour les navigateurs modernes seulement, et ne supporte pas la dégradation gracieuse. Cependant, vous pouvez toujours ouvrir un problème sur la page de dépôt ou essayer de résoudre d’autres problèmes si vous en voyez de simples. Néanmoins, Taggd est toujours un sacré plug-in, et il est pratique à utiliser pour tout projet.

Consultez la page d'accueil de l'auteur pour exemple de code et Liens DL avec un lien vers la page de documentation.

Et si vous avez des questions ou des suggestions, n'hésitez pas à contacter le créateur Tim Severien sur son compte Twitter @TimSeverien..