Transição de imagens com jQuery

Uma boa opção para colocar imagens em transição em destaque em sites, é o plugin jqFancyTransitions em jQuery.

Compatível com os navegadores Safari 2 +, Internet Explorer 6 +, Firefox 2 +, Google Chrome 3 +, Opera 9 +.

Este plugin tem alguns formatos de animação para as imagens as opções são "onda", "fecho" e efeito "cortina".

Para configurar o plugin você vai precisar do jQuery e baixar o plugin jqFancyTransitions no link jqFancyTransitions

Neste exemplo estou utilizando a API jQuery do Google, onde reduzo a solicitação do arquivo js no servidor da hospedagem.



Código jqFancyTransitions padrão

Neste exemplo estou usando o padrão onde só informo o tamanho da div o mesmo tamanho das imagens.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Transição de imagens com plugin jQuery">
<title> Galeria de imagens com jqFancyTransitions</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="/publico/jqFancyTransitions/js/jqFancyTransitions.1.8.min.js" type="text/javascript"></script>

<script>
	$(document).ready( function(){
		$('#slideshowHolder').jqFancyTransitions({ width: 940, height: 529});
	});
</script>
<style>
 
 /* Altera tamanho do titulo do mesmo tamanho que a imagem */
.ft-title { width:935px; height:30px; padding-top:10px; padding-left:5px;}

 /* Formata botão avançar */
.ft-prev, .ft-next { background-color: #000000; padding: 0 10px;}

</style>

</head>
 <body>

 <div id='slideshowHolder'>
	<img src='/publico/jqFancyTransitions/img/example-slide-1.jpg' alt="<i>Parâmetro Web <a href='http://www.parametroweb.com.br/'>Transição de imagens</a></i>" />
	<a href ='http://www.parametroweb.com.br/' ></a>
	<img src='/publico/jqFancyTransitions/img/example-slide-2.jpg' alt="<i>Parâmetro Web <a href='http://www.parametroweb.com.br/'>Transição de imagens</a></i>" />
	<a href ='http://www.parametroweb.com.br/'></a>
	<img src='/publico/jqFancyTransitions/img/example-slide-3.jpg' alt="<i>Parâmetro Web <a href='http://www.parametroweb.com.br/'>Transição de imagens</a></i>" />
	<a href ='http://www.parametroweb.com.br/'></a>
  </div>

  </body>
</html>

Código jqFancyTransitions personalizado

Neste exemplo altero o tipo de animação ativo links nas imagens e ativo o botão navegação para avançar e voltar as imagens.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Transição de imagens com plugin jQuery">
<title> Galeria de imagens com jqFancyTransitions</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="/publico/jqFancyTransitions/js/jqFancyTransitions.1.8.min.js" type="text/javascript"></script>

<script>
$(document).ready( function(){
	    $('#slideshowHolder').jqFancyTransitions({ 
			effect: 'curtain', // wave, zipper, curtain
			width: 940, // largura do painel
			height: 529, // altura do painel
			strips: 20, // Número de tiras
			delay: 5000, //  delay entre as imagens em ms
			stripDelay: 50, // delay beetwen tiras em ms
			titleOpacity: 0.7, // opacidade do título
			titleSpeed: 1000, // velocidade do título appereance em ms
			position: 'alternate', // opções top, bottom, alternate, curtain
			direction: 'fountainAlternate', // opções left, right, alternate, random, fountain, fountainAlternate
			navigation: true, // anterior e próximo botões de navegação coloque true
			links: true//  para mostrar imagens como links coloque true
              });
});
</script>
<style>
 
 /* Altera tamanho do titulo do mesmo tamanho que a imagem */
.ft-title { width:935px; height:30px; padding-top:10px; padding-left:5px;}

 /* Formata botão avançar */
.ft-prev, .ft-next { background-color: #000000; padding: 0 10px;}

</style>

</head>
 <body>

 <div id='slideshowHolder'>
	<img src='/publico/jqFancyTransitions/img/example-slide-1.jpg' alt="<i>Parâmetro Web <a href='http://www.parametroweb.com.br/'>Transição de imagens</a></i>" />
	<a href ='http://www.parametroweb.com.br/' ></a>
	<img src='/publico/jqFancyTransitions/img/example-slide-2.jpg' alt="<i>Parâmetro Web <a href='http://www.parametroweb.com.br/'>Transição de imagens</a></i>" />
	<a href ='http://www.parametroweb.com.br/'></a>
	<img src='/publico/jqFancyTransitions/img/example-slide-3.jpg' alt="<i>Parâmetro Web <a href='http://www.parametroweb.com.br/'>Transição de imagens</a></i>" />
	<a href ='http://www.parametroweb.com.br/'></a>
  </div>

  </body>
</html>