Em minhas pesquisas para o desenvolvimento do novo webARTz nas últimas semanas, encontrei uma série de recursos, funcionalidades e efeitos, claro, nem todos foram utilizados na consepção do layout e das funcionalidades do novo blog, pois senão o webARTz viraria um carnaval tecnológico.

Dentre esses novos recursos pesquisados e encontrados, um deles me chamou bastante a atenção, que foi a “Legenda para Imagem” ou “Image Caption”, que nada mais é que um pequeno trecho de texto, que é exibido junto a imagem.

Essa funcionalidade de legenda pode ser feita e executada de várias formas, neste caso vou dar alguns exemplos utilizando a framework jQuery e alguns de seus plugins, que permitem fazer essa legenda de forma bem prática e personalizável.

Primeiro Exemplo, utilizada o plugin jCaption, que  gera essa legenda animada que aparece ao passar o mouse sobre a imagem, a partir de um elemento ou atributo que você define, no caso você pode gerar essa legenda a partir do atributo “alt” da imagem por exemplo, ou pode personalizar utilizando um outro elemento como um <p> (paragráfo). exemplo

Segundo Exemplo, utiliza o plugin Sliding Boxes and Captions, que gera diferentes legendas, animadas, que surgem de diferentes lado, ou até mesmo parcialmente fixas. Esse segundo plugin necessita um pouco mais de conhecimento para programação, pois é necessário personalizar algo em CSS, e ajustar alguns parâmetros na execução do jQuery. exemplo

Terceiro Exemplo, utiliza o plugin AddCaption, que funciona semelhantemente ao primeiro exemplo, e gera a legenda a partir do atributo “alt” da imagem, essa legenda é fixa e sem animação. O AddCaption tem alguns pontos interessantes, que é a fácil personalização dessa legenda escrevendo os parâmetros quando o jQuery e o plugin são executados. exemplo

Quarto Exemplo, utiliza o plugin sCaption, que gera uma legenda elegante, com um fundo semi transparente e sombreamento no texto. Ela é gerada a partir de um elemento <span> junto a imagem, no qual esta contido o texto da legenda. Há a possibilidade de setar as configurações e personalizar a legenda escrevendo essas informações quando o plugin é acionado na execução. exemplo

Bom, não escrevi nenhum código, ou instrução para execução dos plugins neste artigo, em virtude de ser mais prático você olhar na página do próprio plugin, onde há inclusive documentação com exemplos práticos em alguns deles. Espero que tenha ajudado, caso você tenha alguma dúvida, faça um comentário com a sua questão que prontamente tentarei ajudar a solucionar.