Ir para conteúdo
Entre para seguir isso  
Mickfern

Galeria de fotos com efeito Lightbox

Recommended Posts

Mickfern    32
Mickfern

Software necessário para este artigo: Dreamweaver MX 2004, 8, CS3, CS4 ou CS5.

 

E ae pessoal, tudo certo? Estou postando uma galeria sofisticada e com efeito Lightbox. Caso você nunca tenha ouvido falar sobre este efeito, clique neste link e veja um exemplo desta galeria funcionando.

 

Para começarmos nosso mini tutorial, faça o download dos arquivos necessários neste link. Após efetuar o download, descompacte a pasta e abra o arquivo index.htm no Dreamweaver. Atenção: Scan no final do tópico.

 

Após descompactar, você deverá visualizar as seguintes pastas:

 

imagem1.jpg

 

As pastas que fazem parte do efeito Lightbox são:

 

css – arquivo com a formatação do efeito

 

imagens – pasta que contém as imagens a ser usada na galeria, eu copiei algumas imagens para esta pasta, você pode acrescentar quantas quiser.

 

images – imagens utilizadas pelo efeito, como o botão fechar, carregando, etc

 

js – arquivos JavaScript com todos os códigos responsáveis pelo efeito.

 

A pasta imagens_site foi criada por mim, onde coloquei 4 arquivos para que pudéssemos criar uma galeria mais sofisticada e mais atraente.

 

Vamos ao trabalho. Abra o arquivo index.htm através do Dreamweaver e inicialmente clique no modo Code. Observe a imagem abaixo:

 

imagem2.jpg

 

Na imagem, temos escrito:

 

<script type=”text/javascript” src=”js/prototype.js”></script>

<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>

<script type=”text/javascript” src=”js/efeito.js”></script>

<link rel=”stylesheet” href=”css/efeito.css” type=”text/css” media=”screen”>

 

Caso você futuramente vá criar outras galerias, você precisa das pastas mencionadas no início do artigo (claro, apenas as que citei fazerem parte do efeito lightbox) e no arquivo que tiver a galeria você precisará colocar estas linhas de comando. Elas são responsáveis por chamar os arquivos com o efeito. Observe também que estas linhas de comando estão entre a tag <HEAD></HEAD>.

 

Após ter feito, volte para o modo de visualização Design. Insira uma tabela de acordo com a imagem abaixo:

 

imagem3.jpg

 

Ou seja, três linhas e uma coluna com zero de borda e a largura 100%. Colocar largura 100% quer dizer se auto-ajustar independentemente da resolução do monitor. Nos próximos passos, não veremos nada sobre a galeria propriamente dita, veremos a construção básica do layout para a galeria.

 

Ajuste a altura da primeira célula para 206 e coloque como imagem de fundo o arquivo fundo_banner.jpg que está dentro da pasta imagens_site. Deverá ficar algo assim:

 

imagem4.jpg

 

Agora selecione a última linha, coloque a imagem fundo_rodape.jpg como imagem de fundo e a altura para 56. Após ter feito, nossa deverá ficar aproximadamente assim:

 

imagem5.jpg

 

Continuando, clique dentro da primeira célula e insira uma tabela com uma linha e uma coluna e sem bordas. Centralize a tabela e dentro da única célula insira a imagem banner.jpg que está na pasta imagens_site. Com isso teremos a próxima visualização:

 

imagem6.jpg

 

Insira uma nova tabela com uma linha e uma coluna também sem bordas na última célula. Depois insira o arquivo rodape.jpg que também se encontra na pasta imagens_site.jpg.

 

Com isso terminamos a construção do visual da nossa galeria. É claro que se você já possui conhecimentos em Photoshop, Fireworks ou outros programas gráficos, pode criar seus próprios arquivos e fazer personalizado ao seu gosto.

 

Agora sim vamos começar a trabalhar a galeria. Clique dentro da segunda célula, ou seja, a célula do meio que está funcionando como corpo do site e insira uma tabela conforme as configurações abaixo:

 

imagem7.jpg

 

Depois de inserir, ajuste o alinhamento para centralizar. Se você observar, criamos uma tabela com espaço para 15 imagens, temos 14 dentro da pasta. O próximo passo agora é inserir cada imagem dentro de cada célula. Lembrando que você vai inserir as miniaturas, que estão na pasta thumb_imagens. Após inserir todas, a aparência da sua galeria deverá ficar mais ou menos assim:

 

imagem8.jpg

 

O próximo passo é criar o link para cada imagem. Selecione a primeira imagem e observe a tela abaixo:

 

imagem9.jpg

 

Na parte vermelha, você criará o link exatamente para a mesma imagem, sendo que agora para as imagens que estão na pasta imagens, ou seja, as imagens com tamanho maior. Ainda com a imagem selecionada, clique no modo Code para visualizar o código e veja o que precisamos acrescentar:

 

imagem10.jpg

 

Esta é a linha de comando, com as alterações ficará assim:

 

imagem11.jpg

 

Acrescentamos rel=“efeito” title=”galeria de imagens”

 

Em rel estamos chamando o efeito que está em um dos arquivos da pasta js. E em title você escreve o que você quer que apareça como descrição.

 

Detalhe, você precisa fazer isso com todas as imagens…hehe…bom trabalho..quando terminar é só salvar e testar.

 

Se você quiser ver a galeria deste exemplo funcionando clique aqui. E se quiser fazer o download de todos os arquivos prontos clique aqui.

 

Bom, espero realmente que vocês tenham gostado, esta galeria é muito utilizada em diversos sites conceituados.

 

Exemplo:

 

Galeria em si:

 

34686006.png

 

Efeito lightbox:

 

94958522.png

 

Downloads & Scan

 

- Galeria com efeito lightbox.

- Scan.

 

- Galeria com efeito lightbox pronta.

- Scan.

 

Atenção: não consegui mandar o link do scan, então foi o compact mesmo, caso alguém tenha dúvidas faça você mesmo.

 

Créditos

 

Adriano Gianini

Mickfern

Editado por Mickfern

Compartilhar este post


Link para o post
Rhys    16
Rhys

Bom tutorial.

Aprovado.

Compartilhar este post


Link para o post
grilado13    0
grilado13

Nossa, tutorial muito bem Organizado

 

Vlw mano :D

Compartilhar este post


Link para o post
Rajas    0
Rajas

cara tem como vc coloca um sistema de upload de so image tpw .gif, .jpeg

pq seria bom para coloca no gesior na parte de galery :D

Compartilhar este post


Link para o post
Perry Smith    0
Perry Smith

Muito bom tutorial. Valeu por estar disponibilizando aqui pra nóis. Valeu mesmo Coolface

Compartilhar este post


Link para o post
Uaixs    0
Uaixs

linck nao pega Mais

Compartilhar este post


Link para o post
Visitante
Este tópico está impedido de receber novos posts.
Entre para seguir isso  
  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

×