Dodaj etykiety etykiet z prostymi obrazami za pomocą Taggd

Wiesz, jak pozwala Ci na to Facebook twarze etykiet na zdjęciach? Dobrze, Taggd jest podobny do odpowiednika CSS / JS używanie kropek do notowania gdzie podpowiedzi powinny pojawić się na obrazie.

Biblioteka jest całkowicie darmowa i nie wymaga żadnych zależności takie jak jQuery. To działa na czystym, waniliowym JavaScript, i jest bardzo łatwy w konfiguracji.

Możesz dowiedzieć się trochę więcej ze strony domowej Taggd, która zawiera wersję demonstracyjną i kilka podstawowych kroków za rozpoczęcie.

Istnieje również link do strony dokumentacja online używając Doclets, zgrabnej aplikacji internetowej stworzonej dla dokumentacji JS. Możesz szukaj wersji Taggd, lub przeglądaj aktualną wersję w gałęzi głównej.

Stamtąd dostaniesz ogromna lista właściwości możesz użyć. Każdy dokument jest podzielony przez funkcje działaj na obrazie (Jak na przykład addTag () lub getTag ()) a następnie funkcje, które ci pomogą manipuluj określonymi tagami (Jak na przykład setPosition ()).

Znowu wszystko działa na waniliowym JavaScript więc nie musisz się martwić o problemy ze składnią.

Zaczynać sprawdź repozytorium GitHub, i postępuj zgodnie z instrukcjami konfiguracji.

Wystarczy dodać pliki CSS i JS Taggd do twojego Sekcja , i wtedy utwórz nową instancję elementów Taggd. Można je zdefiniować jeden po drugim lub w tablicy.

Następnie dołącz je do obrazu, i presto! Wszystko gotowe.

Chciałbym to zobaczyć dodatkowe funkcje umożliwiające dostosowanie etykiet, i zmień ich kształt. Byłoby wspaniale stworzyć kwadratowy tag otaczający obiekt, a nie małą różową kropkę. Ale w przypadku darmowej biblioteki o zerowych zależnościach nie mogę narzekać zbyt wiele.

Jak dotąd ta biblioteka jest tworzona tylko dla nowoczesnych przeglądarek, i nie obsługuje zgrabnej degradacji. Zawsze możesz jednak otworzyć problem na stronie repo lub spróbować rozwiązać inne problemy, jeśli zobaczysz te proste. Niemniej jednak Taggd nadal jest kawałkiem wtyczki i jest praktyczny w użyciu dla każdego projektu.

Sprawdź stronę domową autora przykładowy kod i Łącza DL wraz z link do strony dokumentacji.

A jeśli masz jakieś pytania lub sugestie, możesz wysłać wiadomość do twórcy Tima Severiena na swoim Twitterze @ TimSeverien.