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):

<script src="jquery-1.4.min.js" type="text/javascript" language="javascript"></script>

<script src="captify.js" type="text/javascript" language="javascript"></script> 

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!