Thumbox
- Testado no Mozilla Firefox Google Chrome, Opera, Safari, Internet Explorer (Funciona até no 6!*)
- Utiliza javascript não-obstrutivo (o conteúdo ainda é visualizado sem javascript)
- Exibição de galerias, múltiplas galerias ou imagens únicas
- Navegação da imagens via mini-galeria
- Exibição de descrição das imagens
- Efeitos para entrada e saída de imagens
- Navegação via teclado
- Navegação com a "roda" do mouse**
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 |
| preventImgOverflow | Evita que a imagem grande seja exibida em um tamanho maior que o monitor do usuário | true |
Atenção:
- * No internet explorer, as imagens dos botões perderão a transparência, pois o IE6 não acite PNG transparente. Você pode ignorar isso, ou trocar as imagens, ou forçar a transparência com JS
- ** Este parâmetro será autmaticamente desabilitado para IE<8 ou Opera, por problemas de overflow
- *** Para aplicar efeitos diferentes do linear, você precisa carregar o easing.js. Efeitos disponíveis: easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce, jswing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc.
No caso de dúvidas, sugestões, o bugs, favor entrar em contato, terei prazer em dar o feedback
Changelog:
- 11/11/2010 (1.0) Lançamento da primeira versão do plugin
- 13/11/2010 (1.1) Correção de bugs, possibilidade do usuário abortar o carregamento das imagens, implementação de efeitos, e timeout
- 24/11/2010 (1.2) Correção de bugs ao exibir imagem única, inclusão do parâmetro "descAttr" e adaptação do código para funcionar em versõs anteriores do jQuery (1.3.2+)
- 30/11/2010 (1.3) Inclusão do parâmetro "preventImgOverflow" e possibilitar o funcionamento mesmo que dentro do link existam outros elementos além da imagem