Script para redimensionar imagem na redimensiona =\

[G-Gordo 0]

Ola galera to implementado uma galeria de imgs e ela ta ficando massa,só que o problema é que implementei um codigo que ja tinha de uma galeria que eu msm fiz mais usando o programa jalbum,o codigo nao deixa a imagem totalmente redimensionada =\ ela fica com as proporções iguals tanto como altura e largura ficam no msm tamanho,alguem pode me ajudar ? o codigo é esse aqui.

function redimensiona(i){
var sw=373; // Largura mxima da miniatura
var sh=280; // Altura mxima da miniatura
var w=i.width;
var h=i.height;
if(w>h){
var nw=sw;
var nh=(h*sw)/w;
}else if(w<h){
var nw=(w*sh)/h;
var nh=sh;
}else{
var q=sw>sh ? sh : sw;
var nw=q;
var nh=q;
}
i.width=Math.round(nw);
i.height=Math.round(nh);
i.style.display="block";
}

onload="java script:redimensiona(this);"

Todas as imagens da galeria ficam com o tamanho de 280x280,o serto seria 373x280,se alguem puder me ajudar com esse bug ficaria eternamente grato ^^

[KUROL3 3]

quando o tamanho entra no primeiro if.. ele so considera uma posicao nao posicao x e y teriq eu fazer entrou no primeiro if.. entao retorna a posicao x e y e assim sucessivamente..

 

marco

[G-Gordo 0]

quando o tamanho entra no primeiro if.. ele so considera uma posicao nao posicao x e y teriq eu fazer entrou no primeiro if.. entao retorna a posicao x e y e assim sucessivamente..

 

marco

 

Não itendi nada =\

[Bruno Caxito 0]

Todas as imagem estão em dimensoes 373x280?

 

Afinal explicar melhor pra que serve essa função que sem saber oque quer que ela faça não podemos ajudar.

[G-Gordo 0]

Tipo essa função serve pra redimensionar uma foto grande ou seja uma foto por exemplo 790x600 ela transforma essa foto em 373x280 na galeria que eu usei essa função funciona mais essa galeria só funciona se ela for gerada pelo programa de criar album de fotos o Jalbum e agora eu to programando ela em ajax,e quando usei essa função nessa galeria nova todas as fotos ficam 280x280 e nao na dimensão correta =\ e sem falar que tbm uso fotos na dimensão contraria que é 600x790 onde as msm deveria ficar no maximo 330x280 pois é uma foto em pé na galeria feita com o programa ela funfa,mais eu nao quero usar mais o programa pois ele pesa mto em meu servidor e eu tenho que fica em toda atualização do meu site mudando 300 galerias de uma vez,e está não rs mais ve o que pode ajuda vo te da o exemplo

 

www.tb7.com.br/galeriaajax

[Bruno Caxito 0]

Cara não seria melhor você usar apenas CSS? Assim as fotos de uma determinada classe ficarim com dimenções especificadas em CSS na sua página.

 

PS: O exemplo afinal é o seu site ou é apenas um exemplo mesmo

[G-Gordo 0]

como assim em css eu sempre usei em js rs sim eh meu site sim pode ver q ta com umas fotos minhas a outra galeria eh de exemplo que fiz com fotos do goole rs

[Carutcho 0]

fala aee amigo beleza ?

Po eu fiz uma mescla do seu código com um código q eu achei na net , fiz um bolo doido mas eu acho q funciona rsssss

 

Vê se se serve pra você

 

var maxWidth=373; // Largura maxima da miniatura
	var maxHeight=280; // Altura mxima da miniatura
	
	var width=fotoAtual.width;
	var height=fotoAtual.height;

	if ((width / maxWidth) > (height / maxHeight))
	{
		newWidth = maxWidth;
		newHeight = height * (maxWidth / width);

		if (newHeight > maxHeight)
		{
			newWidth = newWidth * (maxWidth / maxHeight);
			newHeight = maxHeight;
		}
	}
	else if ((width / maxWidth) < (height / maxHeight))
	{
		newHeight = maxHeight;

		newWidth = width * (maxHeight / height);

		if (newWidth > maxWidth)
		{
			newHeight = newHeight * (maxWidth / newWidth);
			newWidth = maxWidth;
		}
		
	}
	else
	{
		var q = maxWidth > maxHeight ? maxHeight : maxWidth;
		var newWidth =q;
		var newHeight=q;
	}

	fotoAtual.width=Math.round(newWidth);
	fotoAtual.height=Math.round(newHeight);
	fotoAtual.style.display="block";

Só um comentário relacionado ao código q você postou. Tipo, tente usar variávei com nomes mais sugestivos, nem que sejam grandes e tals, pq quando você coloca só uma letra ou poucas, fica dificil compreender para que aquela variável serve ou quer dizer.

Por exemplo "maxHeight" sei que é altura máxima e por ae vai..

És apenas uma dica amigo ;).

 

Absss

[G-Gordo 0]

ai Cartucho vlw msm pela ideia mais eu peguei esse codigo pronto na net assim msm alias um lek do orkut q me deu rs,agora vem a bomba rs a sua adaptação nao funciono as fotos na galeria ficam sendo mostradas em tamanho real =\

[Carutcho 0]

tipo como você aplicou o código ?

 

tem como jogar online pra eu dar uma olhadinha ?

 

 

 

absss

[G-Gordo 0]

www.tb7.com.br/galeriaajax

[G-Gordo 0]

eu coloquei da seguinte forma

function redimensiona(i){

var maxWidth=373; // Largura maxima da miniatura
	var maxHeight=280; // Altura mxima da miniatura
	
	var width=fotoAtual.width;
	var height=fotoAtual.height;

	if ((width / maxWidth) > (height / maxHeight))
	{
		newWidth = maxWidth;
		newHeight = height * (maxWidth / width);

		if (newHeight > maxHeight)
		{
			newWidth = newWidth * (maxWidth / maxHeight);
			newHeight = maxHeight;
		}
	}
	else if ((width / maxWidth) < (height / maxHeight))
	{
		newHeight = maxHeight;

		newWidth = width * (maxHeight / height);

		if (newWidth > maxWidth)
		{
			newHeight = newHeight * (maxWidth / newWidth);
			newWidth = maxWidth;
		}
		
	}
	else
	{
		var q = maxWidth > maxHeight ? maxHeight : maxWidth;
		var newWidth =q;
		var newHeight=q;
	}

	fotoAtual.width=Math.round(newWidth);
	fotoAtual.height=Math.round(newHeight);
	fotoAtual.style.display="block";
}

 

nas fotos eu coloquei assim

onload="java script:redimensiona(document.getElementById('foto'));"

nota os codigos só funcionam atravez de id,mais o campo que recebe as imagens só tem um id e a galeria como é dinamica mostra todas as imagens no msm id ok um grabde abraço.

[Carutcho 0]

Sakey,

 

Tipo, se você quiser pode dar uma modificada no código, você pode por assim:

 

function redimensiona(obj){

	var maxWidth=373; // Largura maxima da miniatura
	var maxHeight=280; // Altura mxima da miniatura
	
	var width=obj.width;
	var height=obj.height;

	if ((width / maxWidth) > (height / maxHeight))
	{
		newWidth = maxWidth;
		newHeight = height * (maxWidth / width);

		if (newHeight > maxHeight)
		{
			newWidth = newWidth * (maxWidth / maxHeight);
			newHeight = maxHeight;
		}
	}
	else if ((width / maxWidth) < (height / maxHeight))
	{
		newHeight = maxHeight;

		newWidth = width * (maxHeight / height);

		if (newWidth > maxWidth)
		{
			newHeight = newHeight * (maxWidth / newWidth);
			newWidth = maxWidth;
		}
		
	}
	else
	{
		var q = maxWidth > maxHeight ? maxHeight : maxWidth;
		var newWidth =q;
		var newHeight=q;
	}

	obj.width=Math.round(newWidth);
	obj.height=Math.round(newHeight);
	obj.style.display="block";
}

Então nas fotos você não precisaria por id,

colocaria assim no seu HTML, reparei que você chama no evento "onclick" da foto.

 

<img src="foto1.jpg" onclick="java script:redimensiona(this)"/>

Assim você passa o objeto, não tendo a necessidade de referenciar ele com o ID e você pode repetir o mesmo código em todas as imagens.

 

 

Esse código funciona mais ou menos assim.

você passa uma altura mínima e uma maxima que você quer q a foto abra.

Então ele verifica se a largura é maior que a altura se for maior, ele leva em consideração a largura, caso ele reduzindo a largura para o que você definiu, a altura ainda for maior que a altura minima que você estipulou, ele leva em consideração a altura e vice e versa.

 

 

Qualquer coisa posta aee amigo q a gente tenta te ajudar

 

abss

[G-Gordo 0]

eu nao uso onclick rs eu uso onload,tipo eu uso o onload na id pq todas as imagens posui a msm id pq a galeria é em ajax e ela pega as fotos direto do sevidor e cria os tumbs,faz a paginação e mostra as imagens não são varias paginas com as msm imagens de costume mais vo testa essa sua solução pq é tipo assim vo explica como funciona o sistema

ele funciona desta seguinte forma:

 

1° eu jogo as fotos em uma pasta dentro do sistema pelo ftp

2° eu logo no sistema e cadastro o evento,dizendo a data e o nome do evento e a pasta que consta as fotos isso pelo sistema de adiministração da galeria.

3° eu vo na pagina index da galeria e abro vejo os eventos cadastrados no caso as galerias que estão no sistema.

4° Ai eu clico com o mouse em uma galeria que desejo ver essa msm abre uma janela que é o arquivo album.php,onde esse arquivo é todo programado com ajax,js,php e html esse arquivo que mostra todas as fotos.

 

Entendeu meu exeplo meio bagunçado explicado rs um forte abraço

[G-Gordo 0]

eu nao uso onclick rs eu uso onload,tipo eu uso o onload na id pq todas as imagens posui a msm id pq a galeria é em ajax e ela pega as fotos direto do sevidor e cria os tumbs,faz a paginação e mostra as imagens não são varias paginas com as msm imagens de costume mais vo testa essa sua solução pq é tipo assim vo explica como funciona o sistema

ele funciona desta seguinte forma:

 

1° eu jogo as fotos em uma pasta dentro do sistema pelo ftp

2° eu logo no sistema e cadastro o evento,dizendo a data e o nome do evento e a pasta que consta as fotos isso pelo sistema de adiministração da galeria.

3° eu vo na pagina index da galeria e abro vejo os eventos cadastrados no caso as galerias que estão no sistema.

4° Ai eu clico com o mouse em uma galeria que desejo ver essa msm abre uma janela que é o arquivo album.php,onde esse arquivo é todo programado com ajax,js,php e html esse arquivo que mostra todas as fotos.

 

Entendeu meu exeplo meio bagunçado explicado rs um forte abraço

[Carutcho 0]

sim sim,

 

É pq nesse caso você não tem como utilizar assim como você utilizou no onload. Pq ele vai aplicar apenas a uma foto, quando você utiliza "document.getElementById('foto')" você ta passando ali como parâmetro da função apenas o objeto referente ao que tem id "foto", e no caso é mais de uma foto e cada uma com um id diferente.

 

No seu caso, como ele gera esse código dinamicamente, tem q arrumar um jeito de padronizar essas fotos para que você consiga aplicar somente nas tags de imagem que você vai utilizar.

 

Como o nome da foto naum pode ser repetido, e você organiza por pasta, se você padronizar o nome como sei la "foto1.jpg, foto2.jpg" etc. você tem como criar uma função no onload para inserir a função dinamicamente em todas as fotos da galeria, porém você tem q classificar suas pastas e fotos por eventos tipo.

 

"evento1/foto1.jpg , evento1/foto2.jpg , evento2/foto1.jpg , evento2/foto2.jpg"

 

Assim você terá uma lógica e poderá aplicar uma função q vai varrer seu HTML, pegar todas as imagens, comparar se ele tem nome padrão , caso tenha insere a função na imagem, ou se a sua aplicação ga gere ID pras suas fotos, é só padronizar o id e comparar por id ao invés do nome da foto.

 

 

Não sei se fui muito claro. qualquer coisa posta aee o que você naum entendeu para a gente ver.

 

 

Absss

[G-Gordo 0]

boiei literalmente =\

[Carutcho 0]

Rsss, vou tentar explicar melhor.

Seguinte, quando você executa no onload do jeito que você executou utilizando

onload="java script:redimensiona(document.getElementById('foto'))"

O javascript vai procurar um elemento no HTML que possua o id="foto", então ele pega e joga esse elemento como parâmetro da função e a função vai e redimenciona a imagem saca ?

Isso funciona perfeitamente quando se redimenciona uma imagem apenas.

Como você quer que várias imagens sejam redimensionadas, você tem que aplicar na verdade essa função uma vez a cada imagem para que ele modifique o tamanho dela.

 

Como não sei como seu programa faz isso, você pode criar uma função que vai varrer todo o HTML e procurar todas as imagens dele procurar uma imagem no padrão que você pode definir e caso encontre , você redimensiona.

Como não sei o ID delas, ou se é gerado id, você pode padronizar o nome das fotos e utilizar isso como um padrão para que possa redimencionar so as fotos que possuem uma logica no nome.

Se você fizer assim por exemplo

var img = document.getElementsByTagName("img");
 for (i=0;i<img.length;i++)
 {
  if (img[i].src.search("foto")!=-1) 
  {
   redimenciona(img[i]);
  }
 }

O javascript vai varrer seu documento HTML e pegar todas as tags img que estiverem a palavra "foto"

como no exemplo:

<img src="c:/evento1/foto1.jpg">
ou
<img src="c:/evento1/foto2.jpg">

Então ele pega essa foto e redimensiona pro tamanho certo.

 

Eu to meio no chutômetro, pq naum sei exatamente como estão os códigos do programa saca?

 

 

absssss

[G-Gordo 0]

tipo codigos de qual programa? se for o meu eu te passo tudo por email,e tipo eu nao gero id o ajax pega o diretorio das fotos e mostra na galeria na msm id ou seja eu só uso uma id onde essa id é a msm pra todas as fotos pq nao tem paginação feita por mim e sim pelo ajax,não sei se fui mto claro rs um abração.

[Carutcho 0]

Blzinha entaum,

 

Vou te ajudar com isso.

Me add ae no msn, reinatcho@msn.com

 

Eu entro sempre depois das 21, aee te ajudo a resover essa parada ae..

 

Abssss