Početna » Web dizajn » Dodajte oznake opisa jednostavne slike s oznakom Taggd

    Dodajte oznake opisa jednostavne slike s oznakom Taggd

    Znate kako vam Facebook omogućuje lica s oznakom na fotografijama? Dobro, Taggd je kao CSS / JS ekvivalent pomoću točaka za notaciju gdje se na slici moraju pojaviti opisi alata.

    Knjižnica je potpuno besplatna, i ne zahtijeva nikakve ovisnosti kao što je jQuery. To radi na čistom vanilijskom JavaScriptu, i vrlo je jednostavno postaviti.

    Možete saznati nešto više s Taggd početne stranice koja uključuje demo i neke osnovne korake za početak.

    Tu je i veza s online dokumentacija koristeći Doclets, urednu malu web aplikaciju napravljenu za JS dokumentaciju. Možeš pretražite verzije Taggd, ili pregledajte trenutnu verziju u glavnoj grani.

    Odatle, dobit ćete ogroman popis nekretnina možeš koristiti. Svaki dokument je podijeljen po funkcijama koje rade na slici (kao što je addTag () ili getTag ()) nakon čega slijede funkcije koje vam pomažu manipulirati određenim oznakama (kao što je setPosition ()).

    Opet, sve radi na JavaScriptu vanilije tako da ne morate brinuti o pitanjima sintakse.

    Započeti pogledajte GitHub repo, i slijedite upute za postavljanje.

    Vi samo dodajete Taggd CSS i JS datoteke u svoj odjeljak , i onda stvorite novu instancu elemenata Taggd. One se mogu definirati jedan po jedan ili u nizu.

    Zatim dodajte ih na sliku, i presto! Sve je spremno.

    Voljela bih vidjeti dodatne značajke za prilagodbu oznaka oznaka, i promijeni svoj oblik. Bilo bi strašno stvoriti kvadratnu oznaku koja okružuje objekt, a ne malu ružičastu točku. Ali za besplatnu knjižnicu s nula ovisnosti, ne mogu se mnogo žaliti.

    Do sada je ova knjižnica napravljena samo za moderne preglednike, i ne podupire gracioznu degradaciju. Međutim, uvijek možete otvoriti problem na repo stranici ili pokušati riješiti druge probleme ako vidite neke jednostavne. Unatoč tome, Taggd je i dalje pravi dodatak i praktičan je za korištenje u bilo kojem projektu.

    Pogledajte početnu stranicu autora za uzorak koda i DL veze zajedno s link na stranicu s dokumentacijom.

    A ako imate bilo kakvih pitanja ili prijedloga slobodno pošaljite poruku kreatoru Timu Severienu na njegov Twitter @TimSeverien.