Como ampliar a imagem

[tiagocaus 1]

Olá Pessoal,

 

Vi um site que abre as imagem de um deito legal, pelo menos eu achei...rsrsrs.

Gostaria de saber como e esse cod que faz isso. O Site é: http://www.pchcastaman.com.br/fotos.php

So clicar na foto.

 

 

Se algum souber de algum site que tenha esse tutorial posta ai, beleza...

 

 

 

Abração a todos.

[Tiago Giarreta 0]

Falae tiagocaus, acho que esse tópico na parte de javascript deve

te ajudar com isso, ele faz a mesma coisa e ja tem ate o script pronto.

 

http://forum.imasters.com.br/index.php?showtopic=223448

 

Abraço!

[tiagocaus 1]

 

Olá Amigo Tiago,Valeu pela ajuda, mas to com outra dificuldade... eu não consegui fazer o script abrir na mesma página dentro de uma LAYER, como aquele site que eu indiquei la em cima. Você sabe como fazer daquele jeito, com fundo da página cinza e o fundo da foto brando. Eu achei super fera aquele jeito.Se algum souber como fazer me ajude por favor.obrigado

[Hamilcar 1]

 

Olá Amigo Tiago,

 

Valeu pela ajuda, mas to com outra dificuldade... eu não consegui fazer o script abrir na mesma página dentro de uma LAYER, como aquele site que eu indiquei la em cima. Você sabe como fazer daquele jeito, com fundo da página cinza e o fundo da foto brando. Eu achei super fera aquele jeito.

 

Se algum souber como fazer me ajude por favor.

 

 

obrigado

 

CLick no link abaixo e veja se é isto o que quer.

Link

[visitante_php 0]

eu testei o script, ele cria novas imagens, eh pra isso acontecer?

[tiagocaus 1]

 

Olá Amigo HCAR,Eu estou usando esse Script que você mandou o link, so que não estou conseguindo fazer como esta o deste site (acesse: http://www.pchcastaman.com.br/fotos.php), eu gostaria de fazer um parecido com o deste site.você sabe como fazer daquele jeito?obrgaido pela ajuda.

[Hamilcar 1]

 

Olá Amigo HCAR,Eu estou usando esse Script que você mandou o link, so que não estou conseguindo fazer como esta o deste site (acesse: http://www.pchcastaman.com.br/fotos.php), eu gostaria de fazer um parecido com o deste site.você sabe como fazer daquele jeito?obrgaido pela ajuda.

Não deu pra entender o que você quer direito, mas vou tentar explicar como o site que você passou amplia as imagens, o que está sendo feito é que são enviadas duas imagens para o site, uma pequena e uma grande, então a página principal mostra as imagens pequenas e quando se clica na imagem, o link está direcionado para uma função javascript que muda o caminho apontando para uma imagem com o mesmo nome só que maior, e para esconder a tela ele está usando uma imagem transparente dentro da div abaixo<div id="overlay" style="position: absolute; width: 1008px; height: 1108px; z-index: 1; left: 0px; top: 0px; background-image: url(overlay.png); visibility: hidden;" onClick="java script:fecha()"></div>

[tiagocaus 1]

 

Como que seria para o Script Lightbox2, fazer do mesmo jeito, ao inves de abrir em um nova página branca, ele abrir na mesma página dentro de um DIV?Obrigado amigo pela ajuda que esta me dando.Abraços.

[tiagocaus 1]

 

Olá Amigo, acho que to quaze lá...rsrs

 

Olá só. Quando eu estava fazendo o link desta forma, ele estava abrindo a img em um nova janela:

<a href="images/image-1.jpg" rel="lightbox">image #1</a>

 

 

e quando fiz assim: <a href="#" rel="lightbox">image #1</a>

 

apareceu um DIV com o local onde supostamente iria aparecer a imagem. Creio que o Lightbox2, ja tem essa opção de abrir na mesma página.

 

Onde aparece o #, deve precisar de algum comando de script, so que não tenho ideia de como é esse comando...rsrs.

 

De uma olha no site que estou fazendo ( http://raystrucksales.com/site/details.php?id_carro=3 ), so clicar na img pequena que você ira entender melhor.

 

 

Abração, e obrigado.

[Hamilcar 1]

tiagocaus, não sei o que pode estar errando, testei o script e só precisei alterar como nos passos informados pelo site para utilização do lightbox, talves você esteja informando errado os caminhos no script, veja os passos a seguir:

 

1-adicionar na sua página:

 

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

 

2-Checar os caminhos das imagens prev.gif e next.gif, no arquivo lightbox.css, e checar os caminhos das imagens loading.gif e close.gif no arquivo lightbox.js, verifique se há mais algum outro caminho a ser especificado.

Obs: o caminho é relativo ao seu script.

 

3-coloque os seus links que utilizarão o script:

 

<a href="aqui a imagem grande" rel="lightbox" title="my caption">aqui a imagem pequena</a>

 

veja o teste que fiz com o script:

 

teste lightbox

[tiagocaus 1]

 

Sim amigo, o meu cod esta funcioando como o seu. o que eu gostaria é que quando clicasse na img pequena abrice a grande na mesma página ao inves de abrir em um página branca. reparou que quando você clica na img ele aparece um DIV que faz o load, eu gostaria que a imagem abrice dentro dessa dive, ma mesma página.Obrigadão amigo.

[Hamilcar 1]

 

Sim amigo, o meu cod esta funcioando como o seu. o que eu gostaria é que quando clicasse na img pequena abrice a grande na mesma página ao inves de abrir em um página branca. reparou que quando você clica na img ele aparece um DIV que faz o load, eu gostaria que a imagem abrice dentro dessa dive, ma mesma página.Obrigadão amigo.

Não está muito claro, mas veja se é o que quer:Não precisa usar o script, é só colocar um div na página que será mostrada a imagem, na posição que você quer, esta div deve ser relativa, então ao clicar na foto, crie um script que mostrará a imagem grande na div e que mostre esta div, tenho um script que faz isto, se for o que quer coloco o modelo para você.Obs: Desta maneira ao mostrar a imagem, o restante da página será empurrado para baixo, se não quizer que a página seja empurrada para baixo é só colocar a div com posicionamento absoluto.

[tiagocaus 1]

 

Olá Amigo HCAR,é isso mesmo que você esta falando. Teria como você postar o seu cod?Muito obrigado pela ajuda.Abração.

[Hamilcar 1]

 

Olá Amigo HCAR,é isso mesmo que você esta falando. Teria como você postar o seu cod?Muito obrigado pela ajuda.Abração.

Coloquei o exemplo online, veja se consegue adaptar, se não conseguir, poste novamente:link

[visitante_php 0]

eu usei a versao 2.xx desses arquivos sendo que meu internet explorer, bloqueia o odigo, mas o FF nao, teria como fazer o IE nao bloquea-lo?

[Hamilcar 1]

eu usei a versao 2.xx desses arquivos sendo que meu internet explorer, bloqueia o odigo, mas o FF nao, teria como fazer o IE nao bloquea-lo?

Talves seu 'IE' esteja habilitado para não executar scripts, se for isto veja este link:Habilitar javascript

[tiagocaus 1]

 

Olá Amigo, consegui fazer aparecer a img dentro do DIV graças a sua ajuda, mas não consegui fazer com que ela não empurace o site para baixo, eu gostaria que a img aparecesse no meio da tela, você tinha dito que era comente colocar como Absoluto, coloquei, mas não deu certo.Gostaria que quando a img aparecer, ela ficaria por cima de tudo sem mexer no site para baixo, Desde ja, fico muito grato a sua ajuda.Abração.

[visitante_php 0]

pois eh, o JS q uso para validar forms funciona sem bloqueio....

[Hamilcar 1]

 

Olá Amigo, consegui fazer aparecer a img dentro do DIV graças a sua ajuda, mas não consegui fazer com que ela não empurace o site para baixo, eu gostaria que a img aparecesse no meio da tela, você tinha dito que era comente colocar como Absoluto, coloquei, mas não deu certo.Gostaria que quando a img aparecer, ela ficaria por cima de tudo sem mexer no site para baixo, Desde ja, fico muito grato a sua ajuda.Abração.

tiagocaus, fiz uma adaptação no script, veja se ficou como você quer, vlw.veja como ficou

[tiagocaus 1]

 

Amigo HCAR,

Funcionou perfeitamente... so que não estou conseguindo colocar o fundo branco dentro da div. Eu tentei fazer o modo de aparecer as fotos como o desse site (http://www.pchcastaman.com.br/fotos.php), é bem legal, aparece um fundo cinza na página toda e onde aparece a foto tem o fundo branco. Como se faz daquele geito?

O COD que coloquei esta assim:

 

<script language="JavaScript" type="text/javascript">	function someFoto(){	document.getElementById("mostraFoto").style.display ='none';	//document.getElementById("fechaFoto").style.display ='none';				document.getElementById("mostraFoto").innerHTML  = '';	}function loadFoto(foto){	document.getElementById("teste").innerHTML = '<img src="' +foto+ '" onLoad="mostraFoto(\''+foto+'\')" height="1" width="1" id="foto">';}function mostraFoto(foto){	var imagem = new Image();	imagem.src = foto;	var x = imagem.height;	var y = imagem.width;			var mostra = '';	mostra += '<br><div align="center"><img src="'+foto+'"><br><br>';	mostra += '<a href="javascript:someFoto()" title="Fechar">Fechar</a><br></div>';		document.getElementById("mostraFoto").style.height = (x);	document.getElementById("mostraFoto").style.width = (y+30);		//Pegar tamanho da tela	w = screen.availWidth;	h = screen.availHeight;		//Posicionar a foto na tela	document.getElementById("mostraFoto").style.top = (110);	document.getElementById("mostraFoto").style.left = ((w/2)-(y/2));		//Mostrar a foto	document.getElementById("mostraFoto").innerHTML = mostra;	document.getElementById("mostraFoto").style.display ='block';	document.getElementById("fechaFoto").style.display ='block';}</script>

.CSS

<style type="text/css">.mostraFoto {	background-color: #FFFFFF;	display: none;	border: 15px inset #FFFFFF;	padding-bottom: 40px;}

Mostra foto:

<div id=teste style="display:none"></div>			<div id="mostraFoto" style=" position:absolute"></div>

Link:

<a href="#"><img src="uploads/<?php echo $row_fotos['foto']; ?>" alt="Click View Details" width="99" height="69" border="0" class="borda_cinza_escuro" onClick="loadFoto('uploads/<?php echo $row_fotos['foto']; ?>')"></a>