Добавьте простые ярлыки подсказок к изображениям с Taggd

Вы знаете, как Facebook позволяет вам метки лица на фотографиях? Что ж, Taggd это как эквивалент CSS / JS используя точки для записи где подсказки должны появляться на изображении.

Библиотека полностью бесплатна, и не требует никаких зависимостей такие как jQuery. Это работает на чистом ванильном JavaScript, и это супер легко настроить.

Вы можете узнать немного больше на домашней странице Taggd, которая включает в себя демо и некоторые основные шаги для начала.

Там также есть ссылка на электронная документация используя Doclets, маленькое аккуратное веб-приложение, созданное для документации JS. Вы можете поиск версий Taggd, или же просмотреть текущую версию в мастер ветке.

Оттуда вы получите огромный список свойств ты можешь использовать. Каждый документ разделен на функции, которые оперировать изображением (такие как добавить метку() или же GetTag ()) с последующими функциями, которые помогут вам манипулировать определенными тегами (такие как SetPosition ()).

Опять все работает на ванильном JavaScript так что вам не нужно беспокоиться о проблемах синтаксиса.

Для начала проверить репо GitHub, и следуйте инструкциям по установке.

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

затем добавить их к изображению, и престо! Вы готовы идти.

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

Пока эта библиотека сделана только для современных браузеров, и не поддерживает грациозную деградацию. Однако вы всегда можете открыть вопрос на странице репо или попробовать решить другие проблемы, если увидите какие-то простые. Тем не менее, Taggd по-прежнему чертовски плагин, и его практично использовать для любого проекта.

Проверьте домашнюю страницу автора для образец кода а также DL ссылки вместе с ссылка на страницу документации.

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