Como definir o tamanho máximo em um "lightbox"

Escrito por vail joy | Traduzido por vinícius albuquerque
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como definir o tamanho máximo em um "lightbox"
Os scripts Lightbox são uma forma elegante de exibir portfólios, galeria ou trabalhos artísticos (Comstock Images/Comstock/Getty Images)

"Lightbox" é um termo geral usado para designar uma janela que se sobrepõe à página web quando clica-se em uma imagem, exibindo uma versão maior da mesma imagem. O script original em jQuery (agora chamado de "Lightbox 2") tem servido como base para muitos outros scripts que existem desde o seu lançamento, como o PrettyPhoto, Litebox e Slimbox. Cada script foi escrito com seus próprios estilos e variáveis e podem ter métodos diferentes para controlar o tamanho máximo das imagens. O PrettyPhoto, por exemplo, permite definir altura e largura padrão no script de configuração inserido no cabeçalho do documento HTML. No Lightbox 2 deve-se modificar o script para que uma imagem possa se ajustar ao tamanho da tela do usuário.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Baixe a versão atual do script Lightbox da página oficial do Lightbox 2. Extraia a pasta do script e abra para localizar o arquivo "lightbox.js". Abra o arquivo em um editor de texto ou de HTML.

  2. 2

    Localize as linhas de código abaixo, próximas da linha 262 do script:

    this.lightboxImage.width = imgPreloader.width; this.lightboxImage.height = imgPreloader.height;

    Coloque o cursor no início de cada linha e digite esses dois comandos para desabilitá-las:

    //this.lightboxImage.width = imgPreloader.width; //this.lightboxImage.height = imgPreloader.height;

  3. 3

    Insira uma nova linha abaixo das duas linhas que você desabilitou. Copie e cole o código abaixo na nova linha:

    if (imgPreloader.width > 850) imgPreloader.width = 800; if (imgPreloader.height > 620)imgPreloader.height = 600;

    Por padrão, esse código que acabou de inserir definirá 600 pixels como largura máxima e 800 píxels como altura máxima. Para alterar esses valores, adicione 50 à largura desejada e edite o primeiro valor numérico. Edite o segundo valor com a largura exata. Edite o terceiro e o quarto valor com a altura desejada, adicionando 20 ao terceiro valor. Os pixels adicionais são o espaçamento entre a imagem e a moldura do Lightbox.

  4. 4

    Salve o script e abra o arquivo "lightbox.css", que está na pasta "css". Adicione uma declaração "max-height" e "max-width" no seletor "#lightbox img" e defina os valores que quiser para largura e altura. Por exemplo:

    lightbox img{ width: auto; height: auto;max-width:800px;max-height:600px;}

  5. 5

    Salve o arquivo css e acesse o servidor. Renomeie quaisquer arquivos "lightbox.js" e "lightbox.css" no servidor e mantenha-os lá para ter uma garantia no caso de algo errado acontecer com os arquivos que você editou antes. Envie os arquivos modificados e limpe o cache do navegador. Teste as alterações clicando em uma imagem que tenha o Lightbox habilitado e conclua os ajustes desejados no estilo (CSS).

Dicas & Advertências

  • Para saber quais estilos podem ser modificados a fim de mudar a aparência do Lightbox, abra uma imagem com Lightbox na página, usando o navegador Opera ou o complemento FireBug do Firefox, clique com o botão direito na imagem e selecione "Inspecionar Elemento", no menu suspenso. Veja que pedaço de código CSS aparece no lado direito da janela de código e altere-o no "lightbox.css".

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