Como fazer a transição de imagens no Dreamweaver CS5

Passo 1

Faça o download do arquivo lightbox predefinido de sua escolha e descompacte-o. Você encontrará uma série de quatro pastas e um arquivo index.html. As pastas são "css", que tem arquivos com folhas de estilo em cascata, "fotos", que contém duas cópias de cada uma das fotos que você irá usar, uma com uma miniatura, outra com resolução total, "imagens", Ele contém os ícones usados ​​para os botões e controles e "JS", que contém os arquivos Javascript que você usará.

Passo 2

Copie suas próprias imagens e as miniaturas na pasta "fotos", certifique-se de que nas miniaturas você prefixe o nome da imagem com "thumb_". Por exemplo, "car.jpg" teria uma miniatura de "thumb_car.jpg". Certifique-se de que cada imagem tenha a miniatura correspondente.

Passo 3

Copie a caixa de luz no diretório de trabalho para fazer a cópia local do seu site e abra sua página da Web no Dreamweaver. Use a opção de ferramenta "link images" para vincular as miniaturas de sua página da Web aos lugares onde você deseja que elas estejam.

Passo 4

Clique em cada imagem em miniatura e observe a área de propriedades do item do aplicativo Dreamweaver. Você encontrará uma opção para criar um link em torno dessa miniatura. Ao lado dessa caixa de texto, há um ícone "direto ao arquivo". Clique aqui e arraste a seta que torna a imagem maior na imagem dessa miniatura. Repita este procedimento até ter ligado a miniatura de cada imagem.

Passo 5

Clique na janela de código do arquivo HTML e role até o cabeçalho. Dentro da cabeça e escreva um rótulo que se parece com isso:

Passo 6

Adicione uma segunda tag de script, como esta:

A tag de script que você adiciona exibe a barra de ferramentas "jQuery" e para o código específico do javascript. O nome do código pode variar dependendo da caixa de luz que você está usando.

Passo 7

Defina a função "gancho" na sua mesa de luz a partir do código-fonte fornecido, dentro de uma função Javascript que se parece com isso:

Passo 8

Desloque-se para baixo e encontre cada etiqueta que rodeia um rótulo . Digite o seguinte texto em cada tag:

class = "lightbox"

pouco antes do fecho de fechamento da tag. Por exemplo, poderia ser assim:

Passo 9

Vincule o arquivo CSS que acompanha a lightbox ao cabeçalho do seu documento HTML. Você pode fazer isso com a função "Anexar folha de estilos" do Dreamweaver no painel Arquivos. Encontre o arquivo jQuery.css e vincule-o.