Добавете етикети с опростена картинка с прости изображения с Taggd

Знаете как ви позволява Facebook етикети в снимки? добре, Taggd е нещо като CSS / JS еквивалент с използване на точки за отбелязване където на изображението трябва да се появяват подсказки.

Библиотеката е напълно безплатна и не изисква никакви зависимости като jQuery. То работи на чист ванилов JavaScript, и е много лесно да се настрои.

Можете да научите малко повече от началната страница на Taggd, която включва демо и някои основни стъпки за да започнете.

Има и връзка към онлайн документация използване на Doclets, чист малък уеб приложение, направено за JS документация. Можеш Търсете Taggd версии, или разгледайте текущата версия в главния клон.

От там ще получите огромен списък от имоти можеш да използваш. Всеки документ се разделя на функции, които работят върху изображението (като addTag () или getTag ()) последвани от функции, които ви помагат манипулиране на определени маркери (като setPosition ()).

Отново, всичко работи с ванилия JavaScript така че не е нужно да се притеснявате за проблеми със синтаксиса.

За да започнете провери репо GitHub, и следвайте указанията за настройка.

Просто добавяте Taggd CSS и JS файловете във вашия раздел , и тогава създайте нова инстанция на елементите Taggd. Те могат да бъдат дефинирани един по един или в масив.

Тогава добавете ги към изображение, и presto! Всички сте готови да отидете.

Бих искал да видя допълнителни функции за персонализиране на етикетите на етикетите, и да променят формата си. Би било страхотно да създадете квадратни етикети, които да обграждат обект, а не малка розова точка. Но за свободна библиотека с нулеви зависимости не мога да се оплачам много.

Засега тази библиотека е направена само за модерни браузъри, и не подкрепя грациозната деградация. Въпреки това винаги можете да отворите проблем на страницата за репо или да опитате да решите други проблеми, ако видите прости такива. Независимо от това, Taggd все още е чесън от плъгин и е практично да се използва за всеки проект.

Вижте началната страница на автора за примерен код и DL връзки заедно с a връзка към страницата за документация.

И ако имате някакви въпроси или предложения, не се колебайте да съобщите на създателя Тим Севериен в неговата Twitter @TimSeverien.