Legendas Elegantes Nas Imagens Com jQuery Captify

Legendas elegantes em imagens jQuery Captify: exemplo

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!

Be Sociable, Share!

1 Comentários

  1. amazing jquery brow
    to baixando e testando
    valeu novamente irmao

Participa! Comenta...