Page 59 - Locaweb - Edição 37
Basic HTML Version
lw
programação
classe aplicada, podendo sofrer efeitos
de animação.
O site do plugin possui vários
exemplos de possíveis combinações
entre as possibilidades existentes na
ferramenta – apesar de não haver uma
documentação muito clara.
jQuery Fancy
Transitions
jqfancytransitions/
Entre as várias bibliotecas que
auxiliam na criação de galerias de
imagens com efeitos, uma que merece
destaque é a Fancy Transitions. A
utilização é simples e os efeitos visuais
são atraentes. A seguir, veja um
exemplo e mais detalhes deste plugin:
<script src="js/jquery.min.js" type="text/
javascript"></script>
<script src="js/jqFancyTransitions.1.8.min.js"
type="text/javascript"></script>
<script>
$(document).ready( function(){
$('#galeria').jqFancyTransitions({ width:400,
height: 300, effect: 'zipper', direction:
'fountainAlternate', navigation:'true'});
});
</script>
</head>
<body>
<div id='galeria'>
<img src='fotoPraia1.jpg' alt=
'Foto da Praia' />
<img src='neve.jpg' alt='Alaska' />
<img src='croacia.jpg' alt='Europa' />
</div>
</body>
A personalização dos efeitos
de transição é feita por meio de
diversas características. As mais
importantes e que merecem destaque
estão listadas a seguir:
effect:
define qual será o efeito de
transição entre as imagens, aceitando os
valores wave, zipper e curtain.
width e height:
dimensão do
contêiner da galeria.
strips:
o efeito da transição é
realizado por meio de faixas que
vão revelando aos poucos a imagem
seguinte da galeria. Neste atributo, o
desenvolvedor define a quantidade de
faixas que irão compor a transição.
delay:
intervalo entre a transição de uma
imagem para a outra (emmilissegundos).
stripDelay:
intervalo entre a exibição
de cada faixa (emmilissegundos).
titleOpacity:
opacidade com a qual
será exibido o atributo title da imagem.
De 0 a 1.
titleSpeed:
velocidade da exibição do
atributo title da imagem.
position:
posição de início da transição,
aceitando os valores top, bottom,
alternate e courtain.
direction:
direção do efeito, aceitando
os valores left, right, alternate, random,
fountain e fountainAlternate.
navigation:
aceita true ou false e é
onde define se será exibida uma barra
inferior que possibilita a navegação entre
as imagens.
links:
por default, as imagens não são
linkadas. Caso este atributo esteja como
true, será possível clicar na imagem para
acessá-la por sua URL.
Exemplo de página com o jqFancy: biblioteca permite
desenvolvimento de sites com efeitos visuais simples
Entre as várias
bibliotecas
que auxiliam
na criação de
galerias de
imagens, a Fancy
Transitions
merece destaque
locaweb
59
