Você provavelmente já viu o efeito Lightbox no trabalho durante as suas viagens na web, embora você não pode 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, escurecimento 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 liso, 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. Descompacte o arquivo e armazenar os arquivos de projeto em um local que você vai se lembrar, como o seu desktop. Dentro da pasta arquivos de projeto você vai encontrar 2 pastas mais "ativos" e "imagens". Elas contêm todos os componentes que você precisa.

Passo 2

Agora, vá em frente e lançar Dreamweaver e escolha Site

Passo 3

Em seguida, criar uma marca novo arquivo em branco, flip em Exibir Código; em seguida, cole

Este código 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 a estrutura da página, ou seja, a estrutura que vai segurar nossas miniaturas. Vá em frente e colar

Como você pode ver, há uma "lightboxgallery" externo

Passo 5

Agora precisamos de nossas miniaturas. Soltar o seu cursor na primeira miniatura

Passo 6

Com a nossa thumbnails no lugar, agora é hora de juntar tudo e começar o roteiro Lightbox acontecendo. Como mencionado anteriormente, o roteiro para a nossa Mesa de Luz vai ser acionado com hiperlinks, então vamos ir e definir os links para as versões maiores de cada imagem e, então, testar os nossos resultados.

Virar para o Design View, selecione a primeira miniatura gráfica; em seguida, no Inspetor de Propriedades clique em "Procurar File '(o ícone da pasta próximo ao campo Link). Navegue até a imagem em tamanho completo correspondente no "imagens" da pasta. Neste caso, "fullsize1.jpg". Repita esse procedimento para cada miniatura, ligando cada um a sua contrapartida em tamanho maior.

Passo 7

Finalmente estamos prontos para testar as coisas! Salvar o arquivo, e escolha Arquivo

Confira essas

Criar Galeria de Imagens arquivos do projeto Mesa de Luz