Mais
×

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

Atualizado em 17 abril, 2017

"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.

Instruções

Os scripts Lightbox são uma forma elegante de exibir portfólios, galeria ou trabalhos artísticos (Comstock Images/Comstock/Getty Images)
  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. 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. 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. 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. 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

  • 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".
Cite this Article A tool to create a citation to reference this article Cite this Article