[Resolvido] Limitar Tamanho Da Foto No Lightbox

[Kurt_RP 0]

Alguem sabe como faze para limitar o tamanho de uma foto no lightbox?

Tipo.. se ao abrir a foto e ela for muito grande, nao dx ela passar da visualização da tela, ou seja, limitar o tamanho da foto.

 

Obs: Digo isso qdo ela é aberta e nao a miniatura.

[Henrique Barcelos 290]

Lightbox não é AJAX...

 

Tópico Movido:

 

AJAX http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript / DHTML

[Kurt_RP 0]

OK.. td bem.

Alguma alma caridosa poderia me dizer como resolver esse problema??

[Henrique Barcelos 290]

Se não me engano, as imagens do lightbox devem vir dentro de uma tag li...

 

No CSS, faça:

ul#IDdaLista li img {
	max-height: //tamanho máximo
}

Lembrando que não funcionará no IE...

 

Procure na documentação do lightbox um atributo chamado maxHeight ou coisa do tipo...

[Kurt_RP 0]

hunn..

Putz sempre essa droga de IE :angry:

Ja estou deixando de outro script aqui que eu estava usando antes pq antes fazendo umas mudanças aqui no meu site e agora nao tem jeito de fazer funciona direito nesse IE, no resto dos outros navegadores funciona.

 

Poderia por favor me passar a documentação desse lightbox?

Pq eu nao tenho aqui, e no site que eu baixei la deles eu nao encontrei.

 

Valeu!

[Henrique Barcelos 290]

Eu tbm não tenho, nunca passei do básico no lightbox...

 

Lembre-se que o Google é seu amigo, ele não morde http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

http://www.google.com/search?ie=UTF-8&oe=UTF-8&sourceid=navclient&gfns=1&q=documenta%C3%A7%C3%A3o+lightbox

[Kurt_RP 0]

Cara.. nao rolou esse teu treco ai em nenhum navegador.

ul#IDdaLista li img {        
max-height: //tamanho máximo
}

Ainda to na luta procurando um jeito de limita o tamnho dessas imagens.

 

QUERO LEMBRAR NOVAMENTE QUE EU NAO QUERO LIMITA O TAMANHO DAS MINIATURAS (PQ EU JA FAÇO GERAR THUMBS DISSO), EU QUERO MESMO É DAS "IMAGENS GRANDE", OU SEJA, QDO CLICAR EM CIMA DE UMA DELAS E ELA ABRIR ELA FICAR DIREITINHO NO TAMANHO CERTO DA TELA SE ELA FOR MUITO GRANDE.

 

Rick, novamente testei aqui e realmente ele ate funciona, só que isso eh pra limita o tamanho das miniaturas e nao é isso que eu to querendo!!

 

De qualquer forma obrigado pela sua ajuda.

[William Bruno 1501]

Eu acredito que não tenha como.

A menos que você estude o código JS do lightbox, e altere nele.

 

você tem 2 partes:

o link na tag a, que vai te levar para a imagem original, caso o suporte à JS esteja desativado, e a tag img dentro desse link, que é apenas a miniatura.

 

Oque acontece, é que ao clicar na imagem, o lightbox, vai atrás do arquivo do link, e abre ele com o efeito do overlay lá.

você não pode simplesmente redimensionar a imagem, antes de fazer o código HTML ?

 

 

Essa é a melhor solução em questão de velocidade de carregamento, pois se você tiver que abrir uma imagem de 2000px x 2000px, redimensionada para 800x800, ainda assim, o tempo de download dela, será o tempo q leva para baixar a imagem de 2000px...

 

Não conheço nenhum lightbox com parâmetros para limitar o tamanho da exibição da imagem. Por isso digo, que se você não vai redimensionar a imagem num programa de edição, terá que estudar o código JS dele.

[Kurt_RP 0]

Pessoal consegui!!

 

Fiz o ajuste aqui mesmo pelo CSS e agora funcionou!

Para ajudar aqueles que tiverem o mesmo problema que eu tive, ai vai...

 

La no arquivo "lightbox.css" façam as seguintes modificações:

Incluam isso (max-height: 490px; max-width:660px;)

Abaixo esta o que deve ser mudado

 

#lightbox img{ width: auto; height: auto; max-height: 480px; max-width:640px;}
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; max-height: 490px; max-width:660px;}
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; max-height: 490px; max-width:660px;}

 

Obs: Estou limitando as fotos para que apareçam no tamanho maximo de 640 x 480px, mas dai isso podera ser alterado conforme quizer, lembrando que os "Container" deverão ser maiores para ficar aquela bordinha em volta.

 

 

Olha testei aqui e funcionou nos principais navegadores, inclusive no raio do IE!!

Bem, eu testei aqui no IE8, ja nas outras versoes eu nao posso garantir nada.

 

Testado no Firefox 3.5.5, Chrome 3.0.195.33, Opera 10.10, Safari 4.0.4 e IE8(por incrivel que pareça :P)

Ou seja, testado nas versões mais atuais.

 

Enfim, pelo menos funcionou nos principais navegadores, só o Opera que ficou um pouco tosco nessa ultima versão, a imagem nao fica na posiçao certa, mas dai o proprio lightbox tb nao fica, deve ser alguma coisa nessa versao do navegador deles.

 

 

Agradeço a todos pela atenção e se alguem souber mais alguma coisa que possa melhorar é só posta ;)

 

 

Abraço galera!