[JavaScript] - Redimensionar Imagem e Colocar Link

[CCV_Pinto]

fui atrás desse recurso para nosso fórum.. mas em nenhum lugar tinha do jeito q eu queria... achei um bem parecido como mod do vBulletin... dae alterei um pouco para funcionar do jeito q eu queria

o q eu queria:

de acordo com a resolução do usuário as imagens dos posts fossem redimensionadas...

agora reparem q não poderia ser uma porcentagem da resolução do usuário... pq o lado eskerdo do post aki q tem o avatar é fixo... em uns 250 pixels... então o ideal seria q eu pudesse setar o máximo das imagens para

resolução horizontal do usuário - constante...

e foi isso q eu fiz:

o argumento obj será o elemento "img" que será passado para a função




function resize_image(obj, link, valor)
{

var browserwidth = window.document.body.clientWidth;
var maxwidth = browserwidth - valor;

if (obj.width > maxwidth)
{
obj.style.cursor = 'pointer';
obj.style.width = maxwidth + 'px';
obj.style.height = parseInt(obj.height * maxwidth / obj.width) + 'px';
obj.onclick = function()
{
window.open(link, '_blank');
return false;
};
}
}



a chamada da função é feita em cada tag img do html

para parametrizar o link da imagem e o valor a subtrair da resolução usei php... não sei como deveria fazer para pegar o link da imagem com próprio javascript.. talvez algo como .getAttribute('src')



<img onload=resize_image(this, $link, $valor) src=$link />


é um código simplezinho q mostra um pouco sobre como alterar um elemento usando javascript

abraços

[CCV_iStiu]

um dia eu ainda vou aprender isso :D

[CCV_HEALbra]

nao uso muito js...vc nao poderia usar isso no php?
bom..nao costumo fazer isso mas pra estudo está aqui minha função para redução e criação de thumb...caso vc queira usar no fórum:



#######################
#Esse script foi criado por: #
#Eric Maicon Silva Sousa #
#Crash #
#[email protected] #
#[email protected] #
####################

class IMG {
var $campo;
var $caminho;
var $t;

var $imagem;
var $nome;

var $origem_x;
var $origem_y;
var $ext;

var $thumbnail;
var $img_origem;

var $x_marca;
var $marca;
var $y_marca;
var $imagem1;

var $x;
var $y;

var $img_final;
var $local;

var $branco;
var $preto;
var $texto;

var $campo_tb_ft;
var $i;
var $th;

var $tamanho_h;
var $tamanho_w;

function imagem($campo,$caminho,$texto,$t,$marca,$i,$th, $tamanho_h, $tamanho_w) {
$this->campo = $campo;
$this->caminho = $caminho;
$this->texto = $texto;
$this->t = $t;
$this->imagem1 = $marca;
$this->i = $i;
$this->th = $th;
$this->tamanho_h = $tamanho_h;
$this->tamanho_w = $tamanho_w;

//Pega a imagem temporária
//se tiver $i é array(inserir multiplo)
if($this->i<> '') {
$this->nome = $_FILES[$this->campo][name][$i];
$this->imagem = $_FILES[$this->campo][tmp_name][$i];
} else {
$this->nome = $_FILES[$this->campo][name];
$this->imagem = $_FILES[$this->campo][tmp_name];
}
//pega tamanho, largura e extensao da img passada
list($this->origem_x, $this->origem_y, $this->ext) = getimagesize($this->imagem);

//se ext = 1 entao é gif
if($this->ext == 1) {
$this->img_origem = imagecreatefromgif($this->imagem);
//nome.gif
$this->thumbnail = explode(".", $this->nome);
$this->thumbnail = $this->thumbnail[0]."-".time()."_alt.gif";
}

//se ext = 2 entao é jpg
if($this->ext == 2) {
$this->img_origem = imagecreatefromjpeg($this->imagem);
//nome.jpg
$this->thumbnail = explode(".", $this->nome);
$this->thumbnail = $this->thumbnail[0]."-".time()."_alt.jpg";
}

//se ext = 3 entao é png
if($this->ext == 3) {
$this->img_origem = imagecreatefrompng($this->imagem);
//nome.png
$this->thumbnail = explode(".", $this->nome);
$this->thumbnail = $this->thumbnail[0]."-".time()."_alt.png";
}

//cria a logo da empresa na foto
list($this->x_marca, $this->y_marca) = getimagesize($this->imagem1);
$this->marca = imagecreatefromgif($this->imagem1);

//define o tamanho...se t_vertical for maior que 200 ele diminui...se nao ele continua
if($this->origem_y > $this->origem_x) {
if($this->origem_y > $this->t) {
$this->y = $t;
$this->x = $this->origem_y/$this->t;
$this->x = $this->origem_x/$this->x;
} else {
$this->x = $this->origem_x;
$this->y = $this->origem_y;
}
} else {
if($this->origem_x > $this->t) {
$this->x = $this->t;
$this->y = $this->origem_x/$t;
$this->y = $this->origem_y/$this->y;
} else {
$this->x = $this->origem_x;
$this->y = $this->origem_y;
}
}

//local logo
//200(tamanho original) - tamanho gif+5
$this->local = $this->y_marca + 5;
$this->local = $this->y - $this->local;

if($this->th == 'normal') {
//cria a img final
$this->img_final = imagecreatetruecolor($this->x,$this->y);
} else if ($this->th == 'thumb') {
//cria a img final
$this->img_final = imagecreatetruecolor($tamanho_h,$tamanho_w);
}

// fundo branco e texto azul
$this->branco = imagecolorallocate($this->img_final, 255, 255, 255);
$this->preto = imagecolorallocate($this->img_final, 0, 0, 0);

//cria a imagem reduzida + a logo
// escreve a string em cima na esquerda
imagecopyresized($this->img_final, $this->img_origem, 0, 0, 0, 0, $this->x, $this->y, $this->origem_x, $this->origem_y);
if($this->imagem1) {
imagecopymerge($this->img_final, $this->marca, 5, $this->local, 0, 0, $this->x_marca, $this->y_marca, 70);
}
imagestring($this->img_final, 2, 2, 2, $texto, $this->preto);
imagestring($this->img_final, 2, 1, 1, $texto, $this->branco);

//copia a imagem para o caminho pedido
//se ext = 1 entao é gif
if($this->ext == 1) {
imagegif($this->img_final, "$caminho/".$this->thumbnail,100);
}

//se ext = 2 entao é jpg
if($this->ext == 2) {
imagejpeg($this->img_final, "$caminho/".$this->thumbnail,100);
}

//se ext = 3 entao é png
if($this->ext == 3) {
imagepng($this->img_final, "$caminho/".$this->thumbnail,100);
}


//destroi
imagedestroy($this->img_origem);
imagedestroy($this->img_final);
if($this->imagem1) {
imagedestroy($this->marca);
}
}
}


bom estudo!
^^

[CCV_Pinto]

uma questão importante é se a execução do php fica da parte do servidor ou do cliente... acho q eh do servidor...

mas esse tipo de post é enriquecedor... vamos aquecer esse fórum... e com o tempo vai vir uma galera pra cá... ;)

abraços

[CCV_HEALbra]

kkkkkkkkkkk
pinto
apesar de ter só nos dois vamos aquecer sim
kkkk
foda viu..o povo nao se interessa ou acha q só existe comunidades do DE, silk, DOTA..

bom..pensando no futuro....nao entendi bem a sua pergunta..mas tds os códigos ficam no servidor..não?

[CCV_Soad]

opa tou entereçado em aprender programação
minha praia é rede mais
quero saber programar um poquim ;D
abraços !!