As melhores legendas de imagem CSS e jQuery de código aberto

O uso de legendas de imagem dentro do HTML tem sido uma longa tradição entre os desenvolvedores web. Normalmente, isso envolve os elementos <figure> e <figcaption> , além de alguns estilos CSS adicionais. Por causa do grande movimento de código aberto, podemos encontrar ainda mais ótimos exemplos de plugins e scripts iniciais para construir essas legendas de imagem em seus próprios projetos.

Quero apresentar uma pequena coleção de soluções CSS e jQuery para fazer legendas de imagens HTML. Essas soluções variam muito em seus métodos e propósitos, mas todas elas merecem consideração. Alguns desenvolvedores precisam implementar um script no WordPress ou Joomla!, enquanto outros podem usar HTML estático. Espero que esta coleção ofereça um ponto de partida para pesquisar o tópico e escolher uma base de código de legenda de imagem que funcione perfeitamente para suas próprias necessidades.

Legendas de imagens CSS

Construir suas próprias legendas de imagem com efeitos CSS pode ser difícil. Às vezes, isso exigirá hacks do navegador e alguma sintaxe extra que você não reconhece. Mas também mostra o quanto a atual indústria de web design avançou em um curto período de tempo.

Esses exemplos são apenas as melhores soluções que encontrei que fornecem um efeito de legenda de imagem contínuo desenvolvido sobre propriedades CSS2 e animações de transição CSS.

Label.css

Quero começar apresentando label.css como uma das melhores bibliotecas de legendas de imagens CSS. Isso permite que você adicione nomes de classe em imagens legendadas que serão atualizadas no HTML. Você pode forçar que as legendas apareçam em qualquer lugar da imagem, mesmo nos cantos.

Além disso, a biblioteca label.css facilita a ocultação de legendas até que o usuário passe o mouse sobre uma imagem. Essa técnica é ótima porque às vezes você deseja que as legendas sejam exibidas como texto estático na página, enquanto outras vezes os efeitos de animação ocultos são mais importantes.

Legendas de imagens Hongkiat

O que eu mais gosto neste artigo do Hongkiat é que as várias legendas de imagem serão implementadas usando diferentes técnicas de CSS. Eles estão todos acoplados em uma grande galeria de legendas, e você pode escolher suas animações favoritas para criar uma interface totalmente nova. Todos os códigos foram testados em navegadores modernos e suportam todos os principais prefixos CSS.

No entanto, o maior problema que alguns usuários terão com este script é que ele não segue a estrutura HTML figure/figcaption. Todo o conteúdo da legenda é mantido dentro de um intervalo dentro de um div de contêiner. O que obviamente ainda renderiza perfeitamente, mas não marca o tipo exato de conteúdo. Mas leva apenas de 5 a 10 minutos para atualizar os elementos para que funcione em uma estrutura mais formatada. Confira a demonstração ao vivo para ver essas legendas em ação.

Legendas HTML5 animadas

O exemplo HTML5 figcaption do Coalmarch é um tutorial de legenda de imagem CSS lindamente simples. Você pode seguir as etapas em apenas alguns minutos e ter um layout brilhante exibindo legendas ocultas ao passar o mouse. O script em si inclui uma pequena quantidade de jQuery, mas é completamente plausível substituir isso e usar efeitos de transição CSS.

Legendas de imagens deslizantes

O blog CSS-Tricks é muito conhecido entre a comunidade de web design. Seu tutorial sobre como criar legendas de imagens deslizantes foi testado em vários navegadores e funciona perfeitamente. Fiquei realmente impressionado com esta demonstração, não apenas por causa dos efeitos, mas também pela sintaxe padrão do HTML. Os elementos figura e figcaption não são apenas implícitos para uma boa medida. É para ajudar o navegador a diferenciar o contexto entre os vários elementos da página. Confira a demonstração ao vivo e veja esse efeito por si mesmo.

legendas de imagem jQuery

O maior benefício de usar jQuery é uma porcentagem muito maior de suporte ao navegador. Qualquer pessoa com JavaScript habilitado deve visualizar suas legendas de imagem exatamente da mesma forma que qualquer outro navegador. CSS é apenas mais fácil porque alguns desenvolvedores preferem não entrar em scripts. Mas essas soluções são igualmente importantes e contribuem muito para a experiência de front-end.

Caption.js

Acabei de encontrar o Caption.js há pouco tempo e esta biblioteca se destacou como uma excelente fonte para desenvolvedores web. O script terá como alvo as imagens com base em seu próprio seletor jQuery (classes, IDs, etc) e incluirá automaticamente os elementos figure e figcaption. Isso é crucial porque a renderização final da página será exibida corretamente, juntamente com a ajuda de algum posicionamento CSS. Caption.js é de código aberto e gratuito para contribuir ou baixar no Github.

jQuery.imageCaption

Agora eu diria que jQuery.imageCaption é a solução perfeita para desenvolvedores que executam um mecanismo CMS. Este plugin é super fácil de personalizar e extrai rapidamente legendas com base no texto alternativo da imagem. Da mesma forma, isso renderizará os elementos figure e figcaption, o que é ótimo para os benefícios de SEO.

Ao chamar a função imageCaption() você não precisa passar nenhum parâmetro na chamada. Isso ainda será renderizado corretamente na página e você poderá aplicar isso em qualquer postagem do blog do WordPress. Da mesma forma, quaisquer classes adicionadas ao elemento img serão transferidas para o elemento <figure> que o contém, o que significa que você tem muito mais controle via CSS.

Legenda

Captionate é definitivamente um projeto de código aberto subestimado por causa de todas as outras soluções disponíveis. Foi desenvolvido por North Krimsly para uso em vários motores CMS. Você pode encontrar um guia tutorial explicando o processo para implementar o Captionate em seu próprio site.

Basicamente, você escreverá um elemento img HTML5 com a classe .caption e isso será captado pelo script jQuery. O texto do atributo alt é então transferido para um elemento figcaption e escrito no HTML. Percorra a página de exemplo e você pode ver que a sintaxe Captionate é bastante minimalista em comparação com outras soluções.

HCaptions

Aprofundando neste exemplo final, acho que o HCaptions pode conter um espectro mais amplo do que apenas imagens. Este plugin jQuery foi desenvolvido para lidar com todo o conteúdo de legenda que pode ser renderizado em HTML. Confira a página de demonstração ao vivo e você verá uma boa coleção de exemplos. Da mesma forma, as várias opções permitem controlar a velocidade e o posicionamento de cada legenda. Existem algumas soluções melhores para gerenciar apenas imagens HTML, mas o plug-in HCaptions serve a um propósito excelente para legendar outros elementos de página da web padrão.

Fechamento

Você pode se surpreender com o quão engenhoso esses scripts podem ser. E quando você está usando um código HTML5 válido, ele oferece uma oportunidade ainda melhor para o Google rastrear suas páginas e indexar o contexto relacionado. Se eu encobri qualquer script fantástico para legendas de imagens, compartilhe conosco na área de discussão do post.