Isso é tanto um tutorial como uma bibliotequinha de galeria open source. Acho que todos já precisaram fazer uma galeria de imagens para um site, fosse apenas institucional, fosse e-commerce.
Existem 1001 maneiras de se fazer uma galeria dessas. Eu criei uma simples, sem usar muitos recursos do DOM. Criei onze exemplos, de "A" a "K" que mostram como fazer uma galeria de imagens. O primeiro exemplo mostra como fazer da maneira mais simples possível, e a complexidade vai aumentando conforme você vai chegando no exemplo K.
Todos os exemplos estão comentados detalhadamente. É bom abrir os exemplos apenas de dois em dois para comparar as diferenças entre eles. Você pode usar o winmerge :)
É importante ressaltar que para alguns esses exemplos podem parecer fracos, mas eles foram desenvolvidos visando quem é totalmente leigo em javascript.
Primeiro de tudo você precisa ter uma área com as imagens pequenas, que ao serem clicadas aparecerão em uma imagem maior. Na verdade todas as nossas imagens serão grandes, mas serão achatadas nas img pequenas. Para a criação de Thumbnails reais, deve-se usar script server-side como PHP ou asp.net.
Você pode baixar todos os exemplos no meu
Sky Drive, ou no meu
Drop Box.
Exemplo A:
Os proprios arquivos HTML contém um tutorialzinho, como este:
é necessario, alem de dar um id para as imagens, definir seu evento onclick, chamando CarregaImagenzao(<<passando aqui o umero da imagem>>)
//funciona em todos os browsers
//o que esta função faz: ela espera que você passe um numero inteiro positivo no lugar de xxx (seu unico argumento ou parametro)
//usando document.getElementById('imagemzona') ele obtem o objeto da imagem maior e altera o seu src Concatenando 3 partes:
// 1) o caminho e primeira parte do nome
// 2) a parte variavel (no caso o xxx)
// 3) a extensao, que no caso é gif.
Por isso não irei detalhar cada um dos arquivos, apenas o último, porque é uma biblioteca de geração de galeria completa.
A última galeria é um arquivo .js. Para usá-la é simples, basta entender como funciona a estrutura da página de galeria:
Eu tenho duas pastas de imagens, a pasta "IMG" e a pasta "Outras". Na pasta img ficarão as imagens da galeria, e na outras ficarão as outras imagens do site que não terão evento, nem ampliação nem nada. Na página html há um img com o id='imagemzona' e a classe = 'imggrande', uma div com o id='divgaleria' que será o lugar onde ficarão os thumbnais.
Tem também um arquivo css simples com as classes 'imgpequena' e 'imggrande', e o arquivo .js referido que faz a coisa toda acontecer. Na minha página html eu referencio/importo/chamo esses 2 arquivos.
Para funcionar você tem que basicamente colocar as imagens na pasta img e o "Inicializa();" ou o "InicializaTempo();"no evento onload.
Ainda não está 100%, faltam umas coisas, como por exemplo identificar o browser do cara, se é IE ou FF e qual a versão, mas já serve. Abra os exemplos desde o A até o K e veja os comentários das funções e as páginas HTML de teste.
Nas três ultimas versões existem alguns parâmetros/variáveis para setar no javascript, e a ultima de todas, a versão "K" é a mais completa de todas. A Versão "K" reune as fuincionalidades de carga automática de imagens da versão H com a carga "manual" através de tags html das versões anteriores. Abaixo você confere a lista de parâmetros da versão K:
var CARREGA_IMG_AUTOMATICA = true; //sete este parâmetro, que ativa temporizador para true para, alem das imagens estáticas ele carregar as dinâmicas.
var QTDE_MAXIMA_IMAGENS = 20; //quantidade maxima de imagens da galeria
var Extencoes = new Array(".gif",".jpg",".png", ".bmp"); //extensões ou sufixos validos
var IMAGENS = "img/"; //diretorio de imagens
var ID_GALERIA = "divgaleria"; //id da div que vai conter os thumbnais da galeria
var ID_IMAGEMGRANDE = "imagemzona"; //id da imagem grande a ser demonstrada
var CLASSE_IMAGEMPEQUENA = "imgPequena"; //classe da imagem pequena
var CARACTER_ESQUERDA = "0"; //caracter a ser preenchido a esquerda no nome das imagens usando padleft
var TAMANHO_NOME = 3; //tamanho do nome da imagem sem caminho e sem extencao: exemplo 005.jpg o tamanho é 3
var DEBUG_MODE = false; //setar para true quando quiser visualizar as mensagens de erro
Experimente usar essa galeria em conjunto com asp, asp.net, php ou qualquer linguagem dinâmicaserver-side. Assim, até mesmo as imagens estaticas podem ser dinamicas via código html dinamico gerado do lado do servidor. Sendo a variavel QTDE_MAXIMA_IMAGENS menor e a variavel CARREGA_IMG_AUTOMATICA = false o site carrega bem mais rapido pois o loop de imagens a ser carregado é menor, ou no caso de CARREGA_IMG_AUTOMATICA = false ele nem chega a ser repetido indefinidamente pelo temporizador. Você também pode implementar a carga de todas as imagens pequenase grandes em divs invisíveis que vão aparecendo e desaparecendo via javascript, conforme a thumbnail que o usuário clica. Existem milhares de possibilidades/combinações diferentes.
Para um próximo release implementaremos a navegação com as setas do teclado e a identificação do browser do usuário.
É isso aí, espero que seja útil para designers que não tem familiaridade com o javascript.
Acho a K muito boa, caso o cliente faça sozinho a manutenção da mesma, visto que ele apenas precisa colocar as imagens escolhidas!
ResponderExcluirValew André. A idéia é essa: as anteriores a K serve só pro cara ver como foi feito, pouco a pouco. Para a versão "L" está previsto poder navegar entre as imagens com as setas do teclado. ;)
ResponderExcluir