Thumbox

Uso padrão

$('#demo1').thumbox();

Controlando quantidade de fotos, posição do dock e da descrição da imagem

$('#demo2').thumbox({thumbs:4, dockPosition:'bottom', maxThumbWidth:50, labelPosition:'top'});

Cor e velodidade do modal alterada e navegação por teclado desabilitada

$('#demo3').thumbox({overlayColor:'#032', overlaySpeed:200, keyboardNavigation:false});

Exibindo na página, apenas a primeira imagem, e mostrando o resto das imagens somente na galeria

Ideal para exibir uma galeria de galerias.

$('#demo4').thumbox({showOne:true});

Com efeitos de entrada e saída das fotos, e da rolagem do dock

$('#demo5').thumbox({openImageEffect:'easeOutBack', closeImageEffect:'easeInBack'});

Exibição de imagens sem a galeria

Quando o plugin encontra apenas uma imagem, ele a abre direto da página

$('.img-alone').thumbox({openImageEffect:'easeOutBack', closeImageEffect:'easeInBack'});

Documentação

Parâmetro Descrição Padrão
thumbs Quantidade de miniaturas exibidas na galeria 5
overlayColor Cor do modal #999
overlayOpacity Opacidade do modal (0.0 a 1.0) 0.8
overlaySpeed Velocidade do surgimento e desaparecimento do modal (tempo em milisegundos) 500
scrollSpeed Velocidade da páginação das galerias (tempo em milisegundos) 500
zoomSpeed Velocidade do efeito de zoom das imagens (tempo em milisegundos) 250
showOne Exibir apenas a primeira imagem na página (true/false) false
keyboardNavigation Ativar/desativar navegação do teclado (true/false) true
showLabel Exibir a descrição da imagem (true/false) true
labelPosition Posição da descrição da imagem (bottom/top) bottom
descAttr Atributo da imagem que contém a descrição de imagem alt
dockPosition Posição da galeria (top/bottom) top
maxThumbWidth Largura máxima de uma miniatura na galeria, para forçar seu redimensionamento. Colocar zero para não redimensionar (medida em pixels) 0
maxThumbHeight Altura máxima de uma miniatura na galeria, para forçar seu redimensionamento. Colocar zero para não redimensionar (medida em pixels) 0
timeOut Tempo máximo de espera pelo carregamento da imagem até o thumbox abortar o carregamento (em segundos) 15
wheelNavigation Habilitar navegação com a "roda" do mouse* (true/false) true
openImageEffect Efeito ao exibir a imagem*** Linear
closeImageEffect Efeito ao fechar a imagem*** linear
scrollDockEffect Efeito ao rolar o dock*** linear

Atenção:

No caso de dúvidas, sugestões, o bugs, favor entrar em contato, terei prazer em dar o feedback

Changelog:


更多js特效请访问: 网页设计爱好者 http://www.html.org.cn