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

As transições de imagem através de uma janela sobreposta de consulta orientada a Javascript são um elemento comum de design da web para a exibição de fotografias e a transição entre imagens como uma apresentação de slides. Esse tipo de transição é geralmente chamado de “caixa de luz”. O editor HTML da Adobe, Dreamweaver CS5, permite vincular bibliotecas de fotos existentes usando bibliotecas Javascript já escritas para obter esse efeito, sem precisar escrever nenhum código Javascript por conta própria.

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 possui arquivos com folhas de estilos em cascata, “fotos”, que contêm duas cópias de cada uma das fotos que você usará, uma com miniatura, outra com resolução total, “imagens”, que contém os ícones usados ​​para os botões e controles e “JS”, que contém os arquivos Javascript que você usará.

Etapa 2

Copie suas próprias imagens e miniaturas para a pasta “fotos”; certifique-se de colocar nas miniaturas o nome da imagem com “thumb_”. Por exemplo, “car.jpg” teria uma miniatura de “thumb_car.jpg”. Verifique se cada imagem tem sua miniatura correspondente.

Etapa 3

Copie a pasta lightbox 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 da ferramenta “vincular imagens” para vincular as miniaturas da sua página da web aos locais onde você deseja que elas estejam.

Etapa 4

Clique em cada imagem em miniatura e veja a área de propriedades do elemento 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 para o arquivo”. Clique lá e arraste a seta que aumenta a imagem na imagem dessa miniatura. Repita este procedimento até ter vinculado a miniatura de cada imagem.

Etapa 5

Clique na janela de código do arquivo HTML e role para o cabeçalho. Dentro da cabeça e, escreva uma etiqueta assim:

Etapa 6

Adicione uma tag de script em segundo lugar, assim:

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

Etapa 7

Defina a função “hook” na sua caixa de luz do código-fonte fornecido, dentro de uma função Javascript que se parece com:

Etapa 8

Role para baixo e encontre cada marca que a cerca . Digite o seguinte texto em cada etiqueta:

class = “mesa de luz”

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

Etapa 9

Vincule o arquivo CSS que acompanha o 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.

Referências

 

Você pode estar interessado:

Deixe um comentário