Adăugați etichete de simplă imagine de tip Tooltip cu Taggd

Știți cum vă permite Facebook etichete în fotografii? Bine, Taggd este cam ca echivalentul CSS / JS folosind puncte pentru a nota unde ar trebui să apară pe ecran o imagine.

Biblioteca este complet liberă și nu necesită dependențe cum ar fi jQuery. Aceasta rulează pe JavaScript pur de vanilie, și este foarte ușor de configurat.

Puteți învăța un pic mai mult de la pagina de start Taggd care include un demo și niște pași de bază pentru a începe.

Există, de asemenea, o legătură către documentația online utilizând Doclets, o mică aplicație web realizată pentru documentația JS. Poti căutați versiuni Taggd, sau navigați la versiunea curentă în ramura principală.

De acolo, veți obține o listă imensă de proprietăți poți să folosești. Fiecare document este împărțit prin funcții care operați pe imagine (precum adaugă etichetă() sau getTag ()) urmat de funcții care vă ajută manipula etichetele specifice (precum setPosition ()).

Din nou, totul rulează pe JavaScript astfel încât nu trebuie să vă faceți griji cu privire la problemele de sintaxă.

Pentru a incepe verificați repo GitHub, și urmați instrucțiunile de instalare.

Trebuie doar să adăugați fișierele Taggd CSS și JS în tine secțiune , și apoi creați o instanță nouă a elementelor Taggd. Acestea pot fi definite unul câte unul sau într-o matrice.

Atunci adăugați-le la o imagine, și presto! Sunteți gata să plecați.

Mi-ar plăcea să văd caracteristici suplimentare pentru personalizarea etichetelor de etichete, și schimba forma lor. Ar fi minunat să creați o etichetă pătrată pentru a înconjura un obiect, mai degrabă decât un punct roz roz. Dar pentru o bibliotecă gratuită cu dependențe zero, nu mă pot plânge prea mult.

Până acum această bibliotecă este făcută numai pentru browserele moderne, și nu sprijină degradarea grațioasă. Cu toate acestea, puteți deschide întotdeauna o problemă pe pagina de repo sau încercați să rezolvați alte probleme dacă vedeți unele simple. Cu toate acestea, Taggd este încă un heck de plugin, și este practic de utilizat pentru orice proiect.

Consultați pagina de pornire a autorului pentru cod simplu și DL link-uri împreună cu a link către pagina de documentare.

Și dacă aveți întrebări sau sugestii, vă rugăm să contactați creatorul Tim Severien pe Twitter @TimSeverien.