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"></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!
