Galeria Lightbox Sem PHP

! DICA PARA VISUALIZAÇÃO DAS IMAGENS DESTE POST: CLIQUE NAS IMAGENS PARA VER MAIOR !

Você provavelmente já viu o efeito Lightbox no trabalho durante as suas viagens na web, embora você pode não ter sabido que era chamado Lightbox. Essencialmente, o visitante clica em uma miniatura da galeria de imagens, e uma versão maior aparece no topo da página, escurendo fora o conteúdo da página por trás dele. Este efeito amplamente utilizado faz uso de jQuery e foi originalmente de autoria de Leandro Vieira Pinho. O efeito Lightbox real será desencadeada por hyperlinks que estabelecemos em nossa página. Eles são muito úteis, e neste tutorial, você vai aprender a construir um em Dreamweaver !  

Passo 1

Primeiro, certifique-se e baixar os arquivos do projeto para este tutorial aqui Descompacte o arquivo e armazene os arquivos do projeto em um local que você vai se lembrar, como o seu desktop. Dentro da pasta lightbox você vai encontrar 4 pastas: css, imagens do site, images e scripts. Elas contêm todos os componentes que você precisa.

Passo 2

Agora, vá em frente e lance no Dreamweaver escolha site>novo site.

Passo 3

Em seguida, abra a página LightBox Gallery.html no seu Dreamweaver.

Esta exibirá o código que contém os links para os arquivos JavaScript externo e CSS que nossa página terá, também, algumas funcionalidades adicionais. Certifique-se de salvar o arquivo para a pasta que você definiu como um site acima. 

Passo 4

Agora estamos prontos para ver a estrutura da página, ou seja, a estrutura que vai segurar nossas miniaturas. Vá em frente e cole mais linhas iguais a estas para aumentar a sua galeria.

Passo 5

Depois é só ir na pasta de images e trocar as miniaturas (src) e as fotos grandes (links).

Passo 6

Com as nossas miniaturas e fotos grande  no lugar, agora é hora de acrescentar as imagens da pasta imagens do site e ver o Lightbox acontecendo. Onde diz LAYOUT DO SITE, vc vai inserir o cabeçalho e abaixo onde está vazio, vc vai inserir o rodapé.

Deve ficar assim:

Passo 7

Logo em seguida vamos em Modify>Page Properties> Background Color e escolheremos a cor preta para combinar com os outros elementos da página.

O resultado no navegador deve ser este:

Quero dedicar este post ao meu aluno André.

André, este post é pra você!