Como fazer transição de imagens no Dreamweaver CS5

Escrito por ken burnside Google | Traduzido por randhal wendel
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer transição de imagens no Dreamweaver CS5
Transições de imagens são feitas através de arquivos vinculados do Javascript (Creatas Images/Creatas/Getty Images)

Transições de imagens através de uma janela de sobreposição de consulta orientada do Javascript são um elemento comum de design da web, para exibir fotografias e fazer a transição entre imagens como uma apresentação de slides. Esse tipo de transição é chamada geralmente de "caixa de luz". O editor de HTML da Adobe, Dreamweaver CS5, permite vincular as bibliotecas existentes de fotografias às bibliotecas pré-escritas do Javascript para conseguir esse efeito sem precisar escrever qualquer código Javascript.

Outras pessoas estão lendo

Instruções

  1. 1

    Baixe o arquivo de caixa de luz pré-montado de sua escolha e descompacte-o. Você encontrará um conjunto de quatro pastas e um arquivo index.html. As pastas são "css", que contém os arquivos das folhas de estilo em cascata, "fotos", que contém duas cópias de cada uma das fotos que você usará - uma em miniatura e uma em resolução máxima, "imagens", que contém os ícones usados ​​por botões e controles, e "js", que contém os arquivos Javascript que serão usados.

  2. 2

    Copie suas próprias imagens e miniaturas na pasta "fotos". Certifique-se de que as miniaturas tenham o nome da imagem precedido de "thumb_". Por exemplo, "car.jpg" teria uma miniatura "thumb_car.jpg". Certifique-se de que cada imagem tenha sua miniatura correspondente.

  3. 3

    Copie a pasta "caixa de luz" para o diretório de trabalho da cópia local do seu site e abra sua página no Dreamweaver. Use a ferramenta "Link Images" (Vincular imagens) para vincular as miniatura em sua página nos locais que desejados.

  4. 4

    Clique em cada miniatura e localize uma opção para criar um link à sua volta na área de propriedades do Dreamweaver. Ao lado da caixa de texto, há um ícone "point to file" (apontar para o arquivo). Clique nele e arraste a seta para a imagem maior apontada pela miniatura. Repita este procedimento até vincular cada miniatura à sua imagem correspondente.

  5. 5

    Clique na janela de código do arquivo HTML e vá até o cabeçalho. Entre as tags <head> e </head>, digite uma tag semelhante à seguinte:

    <script type="text/javascript" src="

    O Dreamweaver abrirá um menu em que você poderá selecionar a pasta "js" usada pela sua "caixa de luz". Selecione o arquivo "jquery.js." O código final se parecerá com o código abaixo, embora possa variar dependendo do local de armazenamento da sua "caixa de luz":

    <script type="text/javascript" src="js/jquery.js"></script>

  6. 6

    Adicione outra tag de script como a seguinte:

    <script type="text/javascript" src="js/jquery.lightbox-0.5..js"></script>

    A primeira tag de script que você adicionou abrirá a ferramenta "jquery", enquanto essa abrirá o código javascript específico da "caixa de luz". O nome do código poderá variar de acordo com a "caixa de luz" que estiver usando.

  7. 7

    Configure a função "hook" para sua "caixa de luz" a partir do código fonte fornecido, em uma função Javascript semelhante a esta:

    <script type="text/javascript"> $(function() { $('a.lightbox').lightBox(); }); </script>

  8. 8

    Role a página para baixo e localize cada tag <a href> ao redor de uma tag <img>. Insira o seguinte texto em cada tag:

    class="lightbox"

    antes da chave de encerramento da tag <a href>. Por exemplo:

    <a href="photos/car.jpg" class="lightbox">

  9. 9

    Vincule o arquivo css que veio com sua "caixa de luz" ao cabeçalho de seu documento HTML. Isso pode ser feito com a função "Attach Stylesheet" (Anexar estilo) no painel "Files" (Arquivos) do Dreamweaver. Procure o arquivo "jQuery.css" e vincule-o.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível