Přidání jednoduchých štítků s popisy obrázků pomocí značky Taggd

Víte, jak vám Facebook umožňuje štítky tváře na fotkách? Dobře, Taggd je jako CSS / JS ekvivalent s použitím teček kde by se na obrázku měly objevit popisky.

Knihovna je zcela zdarma a nevyžaduje žádné závislosti například jQuery. To běží na čistém vanilkovém JavaScriptu, a je to super snadné nastavení.

Na domovské stránce Taggd se můžete dozvědět o něco více obsahuje demo a některé základní kroky pro začátek.

Tam je také odkaz na online dokumentace pomocí Doclets, elegantní malé webové aplikace pro dokumentaci JS. Můžeš hledat verze Taggd, nebo procházet aktuální verzi v hlavní větvi.

Odtud dostanete obrovský seznam vlastností Můžeš použít. Každý dokument je rozdělen podle funkcí, které pracovat s obrazem (jako addTag () nebo getTag ()) následované funkcemi, které vám pomohou manipulovat se specifickými tagy (jako setPosition ()).

Opět všechno běží na vanilce JavaScript takže se nemusíte starat o problémy se syntaxí.

Začít podívejte se na repo GitHub, a postupujte podle pokynů pro nastavení.

Stačí přidat soubory Taggd CSS a JS do vašeho sekce , a pak vytvořit novou instanci prvků Taggd. Ty mohou být definovány jeden za druhým nebo v poli.

Pak připojte je k obrázku, a presto! Jste všichni připraveni jít.

Rád bych viděl další funkce pro přizpůsobení štítků štítků, a změnit jejich tvar. Bylo by úžasné vytvořit čtvercovou značku, která by obklopovala objekt spíše než malou růžovou tečku. Ale pro bezplatnou knihovnu s nulovými závislostmi si nemohu stěžovat.

Tato knihovna je zatím vytvořena pouze pro moderní prohlížeče, a nepodporuje ladnou degradaci. Nicméně můžete vždy otevřít problém na stránce repo nebo se pokusit vyřešit jiné problémy, pokud vidíte nějaké jednoduché. Nicméně, Taggd je stále sakra plugin, a to je praktické použít pro každý projekt.

Podívejte se na domovskou stránku autora ukázkový kód a DL odkazy spolu s odkaz na stránku dokumentace.

A pokud máte nějaké dotazy nebo připomínky, neváhejte a napište tvůrci Timovi Severienovi na jeho Twitteru @TimSeverien.