Bildern Bildinformationen leicht hinzufügen

CaptionerJS
Kommentare

Bilder im Netz mit Unterschriften zu versehen, trägt einerseits zur Accessibility bei, andererseits will man als Website-Besucher genau wissen, was auf dem Bild zu sehen ist. Einen solchen Bildtitel kann

Bilder im Netz mit Unterschriften zu versehen, trägt einerseits zur Accessibility bei, andererseits will man als Website-Besucher genau wissen, was auf dem Bild zu sehen ist. Einen solchen Bildtitel kann man zum Beispiel mithilfe eines CaptionPlug-ins einfügen, etwa mit CaptionerJS. Zwar ist das Plug-in nur eines von vielen zur Verfügung stehenden Plug-ins, allerdings soll es dafür sorgen, sauberen und aufgeräumten HTML-Code zu erstellen.

Statische, animierte und klassische Bilduntertitel mit CaptionerJS

Um eine Bildunterschrift zu erstellen, wird das Bild häufig mit verschiedenen Layern von divs versehen, was schnell zu unaufgeräumtem HTML führt. CaptionerJS nutzt stattdessen die Attribute title und alt für die Bildbeschriftung.

Die Nutzung des Plug-ins ist denkbar einfach. Benötigt wird dafür jQuery sowie das in die Seite eingebundene CaptionerJS-Plug-in. Anschließend können dem Bild die entsprechenden Bildinformationen hinzugefügt werden. Zudem lässt sich der Caption-Typ ändern; zur Verfügung stehen dafür statische, animierte und klassische Beschriftungen.

Code-Beispiele zu den einzelnen Beschriftungs-Typen finden sich in Nuno Franco da Costas Tutorial, das auch einige Beispiele für Bildbeschriftungen mit CaptionerJS bereithält. Das Plug-in steht auf GitHub zum Download zur Verfügung. 

Aufmacherbild: collection of various vintage note papers on white background. each one is shot separately von Shutterstock / Urheberrecht: Picsfive

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -