Les meilleures légendes d'image CSS et jQuery Open Source

L'utilisation de légendes d'images dans HTML est une tradition de longue date parmi les développeurs Web. Cela implique généralement les éléments <figure> et <figcaption> , ainsi que quelques styles CSS supplémentaires. En raison du grand mouvement open source, nous pouvons trouver encore plus d'excellents exemples de plugins et de scripts de démarrage pour créer ces légendes d'image dans vos propres projets.

Je souhaite présenter une petite collection de solutions CSS et jQuery pour créer des légendes d'images HTML. Ces solutions varient considérablement dans leurs méthodes et leurs objectifs, mais toutes méritent d'être prises en considération. Certains développeurs doivent implémenter un script dans WordPress ou Joomla!, tandis que d'autres peuvent utiliser du HTML statique. J'espère que cette collection offrira un point de départ pour rechercher le sujet et choisir une base de code de légende d'image qui fonctionne parfaitement pour vos propres besoins.

Légendes d'images CSS

Construire vos propres légendes d'image avec des effets CSS peut être difficile. Parfois, cela nécessitera des hacks de navigateur et une syntaxe supplémentaire que vous ne reconnaissez pas. Mais cela montre également à quel point l'industrie actuelle de la conception Web a progressé en peu de temps.

Ces exemples ne sont que les meilleures solutions que j'ai trouvées qui fournissent un effet de légende d'image transparent développé sur les propriétés CSS2 et les animations de transition CSS.

Étiquette.css

Je veux commencer par présenter label.css comme l'une des meilleures bibliothèques de légendes d'images CSS. Cela vous permet d'ajouter des noms de classe sur des images sous-titrées qui seront ensuite mises à jour dans le HTML. Vous pouvez forcer les légendes à apparaître n'importe où sur l'image, même dans les coins.

De plus, la bibliothèque label.css permet de masquer facilement les légendes jusqu'à ce que l'utilisateur survole une image. Cette technique est excellente car parfois vous souhaiterez que les légendes s'affichent sous forme de texte statique sur la page, tandis qu'à d'autres moments, les effets d'animation masqués sont plus importants.

Légendes des images Hongkiat

Ce que j'aime le plus dans cet article de Hongkiat, c'est que les différentes légendes d'images seront toutes implémentées à l'aide de différentes techniques CSS. Ils sont tous couplés dans une grande galerie de sous-titres, et vous pouvez sélectionner vos animations préférées pour créer une toute nouvelle interface. Les codes ont tous été testés dans les navigateurs modernes et ils prennent en charge tous les principaux préfixes CSS.

Cependant, le plus gros problème que certains utilisateurs auront avec ce script est qu'il ne suit pas la structure HTML figure/figcaption. Tout le contenu de la légende est contenu dans une étendue au sein d'un conteneur div. Ce qui est évidemment toujours parfaitement correct, mais il ne balise pas le type exact de contenu. Mais cela ne prend que 5 à 10 minutes de mise à jour des éléments pour le faire fonctionner dans une structure plus formatée. Découvrez la démo en direct pour voir ces sous-titres en action.

Légendes HTML5 animées

L'exemple de figcaption HTML5 de Coalmarch est un didacticiel de légende d'image CSS magnifiquement simple. Vous pouvez suivre les étapes en quelques minutes et avoir une mise en page brillante affichant des sous-titres cachés au survol. Le script lui-même inclut une petite quantité de jQuery, mais il est tout à fait plausible de le remplacer et d'utiliser à la place des effets de transition CSS.

Légendes d'image à glisser

Le blog CSS-Tricks est très connu de la communauté des concepteurs de sites Web. Leur tutoriel sur la création de légendes d'images coulissantes a été testé dans un certain nombre de navigateurs et fonctionne parfaitement. J'ai été vraiment impressionné par cette démonstration, non seulement à cause des effets mais aussi de la syntaxe HTML standard. Les éléments figure et figcaption ne sont pas seulement implicites pour faire bonne mesure. Il s'agit d'aider le navigateur à différencier le contexte entre les différents éléments de la page. Découvrez la démo en direct et voyez cet effet par vous-même.

Légendes des images jQuery

Le plus grand avantage de l'utilisation de jQuery est un pourcentage beaucoup plus élevé de prise en charge du navigateur. Toute personne ayant activé JavaScript devrait voir vos légendes d'image exactement de la même manière que n'importe quel autre navigateur. CSS est simplement plus facile car certains développeurs préfèrent ne pas se lancer dans les scripts. Mais ces solutions sont tout aussi importantes et contribuent grandement à l'expérience frontale.

Légende.js

Je viens de découvrir Caption.js il y a peu de temps et cette bibliothèque s'est imposée comme une excellente source pour les développeurs Web. Le script ciblera les images en fonction de votre propre sélecteur jQuery (classes, identifiants, etc.) et inclura automatiquement les éléments figure et figcaption. Ceci est crucial car le rendu final de la page sera affiché correctement, avec l'aide d'un certain positionnement CSS. Caption.js est open source et gratuit pour contribuer ou télécharger sur Github.

jQuery.imageCaption

Maintenant, je dirais que jQuery.imageCaption est la solution parfaite pour les développeurs exécutant un moteur CMS. Ce plugin est super facile à personnaliser et extrait rapidement des légendes basées sur le texte alternatif de l'image. De même, cela rendra les éléments figure et figcaption, ce qui est excellent pour les avantages du référencement.

En appelant la fonction imageCaption() , vous n'avez pas besoin de passer de paramètres dans l'appel. Cela s'affichera toujours correctement sur la page et vous pourrez l'appliquer à n'importe quel article de blog WordPress. De même, toutes les classes ajoutées à l'élément img seront transférées à l'élément <figure> contenant, ce qui signifie que vous avez beaucoup plus de contrôle via CSS.

Légende

Captionate est définitivement un projet open source sous-estimé à cause de toutes les autres solutions existantes. Il a été développé par North Krimsly pour être utilisé dans divers moteurs CMS. Vous pouvez trouver un guide didacticiel expliquant le processus de mise en œuvre de Captionate sur votre propre site Web.

Fondamentalement, vous allez écrire un élément HTML5 img avec la classe .caption et cela sera récupéré par le script jQuery. Le texte de l'attribut alt est ensuite transféré dans un élément figcaption et écrit dans le HTML. Parcourez la page d'exemple et vous pouvez voir que la syntaxe Captionate est plutôt minimaliste par rapport à d'autres solutions.

HLégendes

En approfondissant ce dernier exemple, je pense que les HCaptions peuvent contenir un spectre plus large que de simples images. Ce plugin jQuery a été développé pour gérer tout le contenu des sous-titres qui peut être rendu en HTML. Consultez la page de démonstration en direct et vous verrez une belle collection d'exemples. De même les différentes options vous permettent de contrôler la vitesse et le positionnement de chaque légende. Il existe de meilleures solutions pour gérer uniquement les images HTML, mais le plugin HCaptions sert un objectif formidable pour sous-titrer d'autres éléments de page Web standard.

Fermeture

Vous serez peut-être surpris de voir à quel point ces scripts peuvent être ingénieux. Et lorsque vous utilisez un code HTML5 valide, cela offre à Google une opportunité encore meilleure d'explorer vos pages, puis d'indexer le contexte associé. Si j'ai passé sous silence des scripts fantastiques pour le sous-titrage d'images, veuillez les partager avec nous dans la zone de discussion des publications.