Додайте ярлики підказки простих зображень з Taggd

Ви знаєте, як Facebook дозволяє обличчя на фотографіях? Добре, Taggd це на зразок еквіваленту CSS / JS використання точок для позначення де на зображенні повинні з'являтися підказки.

Бібліотека повністю безкоштовна не вимагає залежностей наприклад jQuery. Це працює на чистому ванільному JavaScript, і це дуже легко налаштувати.

Ви можете дізнатися трохи більше з домашньої сторінки Taggd, яка містить демо-версію та деякі основні кроки для початку.

Також є посилання на онлайн документація використовуючи Doclets, акуратний маленький веб-додаток для документації JS. Ти можеш пошук версій Taggd, або перегляньте поточну версію у головній гілці.

Звідти ви отримаєте величезний перелік властивостей можна використовувати. Кожен документ розділений функціями працювати на зображенні (як от addTag () або getTag ()), а потім функції, які допоможуть вам маніпулювати певними тегами (як от setPosition ()).

Знову все працює на ванільному JavaScript тому вам не потрібно турбуватися про проблеми синтаксису.

Для початку перевірте репо GitHub, та виконайте інструкції з налаштування.

Ви просто додаєте файли Taggd CSS і JS у ваш розділ , і потім створити новий екземпляр елементів Taggd. Вони можуть бути визначені один за одним або у масиві.

Потім додайте їх до зображення, і presto! Ви все готові піти.

Я хотів би бачити додаткові функції для налаштування міток тегів, і змінюють свою форму. Це було б дивним, щоб створити квадратний тег, щоб оточити об'єкт, а не маленьку рожеву крапку. Але для вільної бібліотеки з нульовими залежностями, я не можу скаржитися багато.

Поки ця бібліотека зроблена тільки для сучасних браузерів, і не підтримує витонченої деградації. Проте ви завжди можете відкрити проблему на сторінці репо або спробувати вирішити інші проблеми, якщо побачите прості. Тим не менш, Taggd як і раніше ще біс плагіна, і це практично використовувати для будь-якого проекту.

Перевірте домашню сторінку автора для зразок коду і DL посилання разом з посилання на сторінку документації.

І якщо у вас є які-небудь питання або пропозиції, не соромтеся повідомляти творцеві Тіма Северієна на його Twitter @TimSeverien.