All Articles Dreamweaver
Crie uma Lightbox Gallery jQuery imagem no Dreamweaver
Geoff Blake on Sat, June 18th 9 comments
You've probably seen the Lightbox effect at work during your travels on the web, although you may not have known that it was called Lightbox.

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

Related Videos
Comments (9)

You must be logged in to comment.

  • Hi there, I can't seem to find the project files(zip folder) to download, that is needed for this tutorial???
    • 8 years ago
    • By:
    Reply
  • Rounik Admin
    Hi, They are hyperlinks in the text (in blue) in Step 3, Step 4 and the very last line of this tutorial is a link: "Create Image Gallery Lightbox Project Files". Just click on these to begin downloading the files. Hope this helps Rounik
    • 8 years ago
    • By: Rounik Admin
    Reply
  • Thanks for the reply. I have a website up but I want my photography page to have a lightbox, but when I try and do it on the content page which is an ap div, it doesnt seem to show up at all??? Am I doing something wrong with placing the code maybe???
    • 8 years ago
    • By:
  • Thanks for the previous reply. I now got that done but I have a website already up but I want to have a lightbox on my photography page in the content area. The content area box is an ap div though, and I did the exact same procedure with the code and all but it doesnt show up when I refresh the page????
    • 8 years ago
    • By:
    Reply
  • Un souci ds votre tuto je ne trouve pas les code a copier coller ds dreamweaver ds le fichier que jai telecharger et dc je peu rien fr sur dream sauf si fo recopier ce que vous avez marquer sur votre excemple tuto
    • 7 years ago
    • By:
    Reply
  • wow!!!this tutorial was helpful....but what about prev,next,close and loading icons....hope you will provide the tutorials about that...
    • 7 years ago
    • By:
    Reply
  • azex
    hi, 4 images is looks simple. but, how about if the images is hundred over..? do i need to edited one by one? any other way to simplify it.
    • 7 years ago
    • By: azex
    Reply
  • Ian
    Thanks Geoff, That's a fantastic tutorial for someone like me who sits more on the creative side but sometimes needs to pretend he is a programmer!! The code works perfectly well. I am wondering if there is a fairly simple option - or a tutorial of yours somewhere else - to show how to add descriptive text for each image when it is displayed in the Lightbox, rather than just the "Image 4 of 14" text? Cheers, Ian
    • 6 years ago
    • By: Ian
    Reply
  • Emily
    Is there a way to add HTML content (like another webpage) to pop up in the lightbox as well?
    • 6 years ago
    • By: Emily
    Reply
EDM Production Tips
Logic Pro X 402
Dream It. Do It.
Do you want to learn EDM Production Tips?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: