Legendas Elegantes Nas Imagens Com jQuery Captify

Atualmente, existem milhões e milhões de web sites, mas um bom site é assim considerado por seu detalhes. Quantos sites semelhantes (e até idênticos) não existem na web, que se propõem a fazer a mesma coisa e tem o mesmo escopo? Como saber qual desses é bom e qual deles passa a sensação de que “algo está faltando”? Através dos detalhes.

E, além de uma boa apresentação de imagens ser um “detalhe” muito importante, se o site tiver um bom sistema de exibição de captions para estas imagens, isso também conta. A boa notícia é que isso pode ser feito facilmente através do plugin jQuery Captify.

jQuery Captify é um script de 2.3KB que provê captions (o texto que está no atributo “alt” da imagem) bonitos e elegantes “sob demanda”, quando acontece o evento “mousehover” nas imagens-alvo. Certamente um efeito interessante e chamativo, que causa surpresa agradável aos visitantes.

Usando jQuery Captify

Como é de se esperar, para colocar em produção você deve  fazer download do Captify e fazer as chamadas apropriadas no head de seu documento web (respeitando a estrutura de diretórios de seu projeto, obviamente):

No próprio arquivo compactado do plugin, vem um arquivo CSS de exemplo (que você deve inserir no head, também). Apesar de ser bonito e chamativo, ele é genérico e talvez você precise alterar uma ou duas coisas para que o efeito se adeque perfeitamente a seu projeto.

Como sugerido pelo próprio autor do plugin, todas as imagens que tiverem a classe “captify” serão contempladas pelo efeito de legenda. Então, para ativar o plugin com suas configurações padrão, basta fazer o seguinte:

$('img.captify').captify();

Para ver alguns exemplos, acesso o site oficial do jQuery Captify.

Opções do jQuery Captify


$('img.captify').captify({
// velocidade do efeito de mousehover
speedOver: 'fast',
// velocidade do efeito de mouseout
speedOut: 'normal',
// delay para o caption sumir depois do mouseout (ms)
hideDelay: 500,
// 'fade', 'slide', 'always-on'
animation: 'slide',
// texto/html a ser colocado no início de cada legenda
prefix: '',
// opacidade do caption
opacity: '0.7',
// nome da classe CSS para o box do caption
className: 'caption-bottom',
// posição do caption ('top' ou 'bottom')
position: 'bottom',
// % de largura do span da legenda da imagem
spanWidth: '100%'
});


Conclusão sobre jQuery Captify

Como citado no artigo, os detalhes fazem a diferença em um site. Caso você queira ter um site considerado excelente, faça o básico e, depois, foque sua atenção aos detalhes.

Certamente fazendo efeitos agradáveis, recursos inovadores e controles de personalização, você estará trilhando um bom caminho; e o mesmo se aplica a usar o jQuery Captify: use legendas sob demanda nas imagens e surpreenda positivamente os visitantes!