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 !
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.
Agora, vá em frente e lançar Dreamweaver e escolha Site
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.
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
Agora precisamos de nossas miniaturas. Soltar o seu cursor na primeira miniatura
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.
Finalmente estamos prontos para testar as coisas! Salvar o arquivo, e escolha Arquivo
Confira essas
You must be logged in to comment.