Expandir Foto Ao Clikar Sobre Ela

juliano.ma · Junho 23, 2007

Olá à todos,

tenho uma pagina que possui algumas linhas e colunas com fotos. As fotos não são tumb, apenas estão sendo apresentadas em um tamanho pequeno.

Preciso que quando clikar na foto a mesma aumente sobre toda a página (não é popup) e ao clikar novamente retorne ao seu tamanho inicial.

Dá uma força ai gente!

Abraços!

fahledu · Junho 23, 2007

Você pode trabalhar com div e no evento onclick verifica se ta visivel ou não, se estiver oculta, se não mostra a imagem...

Junho 23, 2007

Segue esse exemplo, basta dar uma adptada....

eu não conseguir de maneira alguma passar a função para onclik....

Casso você consiga posta ai novamente......

<style type="text/css">


.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ECFFC6;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left:-480px; /*position where enlarged image should offset horizontally */

}

</style>
<a class="thumbnail" href="#thumb"><img src="FOTO1.JPG" width="100px" height="66px" border="0" /><span><b>nome da foto</b><br><img src="FOTO2.JPG" width="500" height="332" /><br /></span></a>

é isso ai espero que ajude-o....

abraços...

Junho 26, 2007

Para a foto expandir, pode-se fazer isso:

<!-- Imagem com a altura ajustada automaticamente -->
<img src="fotografia.jpg" width="300" onClick="this.width='600';">

Zero Cool · Junho 28, 2007

você pode uzar o Light Box

lightbox 1.0/

lightox 2.0

ou c você tem como baixar o Dreamweaver CS3

ele tem a parte de efeitos lá tem isso e mtu +

Dreamweaver CS3 - Trial 30 days

juliano.ma · Junho 28, 2007

Agradeço à todos os amigos que postaram!

Resolvi meu problema da usando o seguinte script:

<html>
<head>
<title>AMPLIAR FOTO</title>
<!--fotoZoom é a div em que a imagem irá abrir!
bgFotoZoom é como se fosse uma background que fica em tela inteira com cor transparente definido de 0 a 1, ou 0 a 100-->
<style>
#fotoZoom {
width:0; height:0; background-color:white;
display: none; visibility: visible; position: absolute;
text-align:center;top:0px; left:15%;
}
#bgFotoZoom {
background-color: black; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); display: none;
width:100%; height:100%; top:0px; left:0px; visibility:visible; position:absolute;
}
img {
border:0px;
}
</style>

<!--Esta função mostra a div oculta>>-->
<script language="JavaScript" type="text/javascript">
function amplia(){
document.getElementById('fotoZoom').style.display='block';
document.getElementById('bgFotoZoom').style.display='block';
}
</script>

<!--Esta função mostra as informações que estarão dentro da div>>
obs.: o script a seguir dentro de innerHTML="" é onde mostrará o conteúdo dentro da div,
deve ser escrito na mesma linha sem quebra de linha entre os dados html dentro deste script-->
<script language="JavaScript">
function abre(img,legenda,credito,largura,altura) {
document.getElementById("fotoZoom").innerHTML="<center><table bgcolor='white' cellspadding='1' cellspacing='1'><tr><td align=center><font size=2 face=Verdana>"+legenda+"</td></tr><tr><td><a href='java script:fecha();'><img alt='"+legenda+"' src='"+img+"' width='"+largura+"' height='"+altura+"'></a></td></tr><tr><td align=right><font size=2 face=Verdana>"+credito+"&nbsp;</font></td></tr></table>";
}
</script>

<!--Esta executa o script fecha, para fechar a div que foi aberta anteriormente-->
<script language="JavaScript" type="text/javascript">
function fecha() {
document.getElementById('fotoZoom').style.display='none';
document.getElementById('bgFotoZoom').style.display='none';
}
</script>
</head>
<div id='bgFotoZoom'>
</div>
<center><div id='fotoZoom'></div>
</center>
<body>
<center>
<table style="width: 200px; text-align: center;" border="0"
cellpadding="1" cellspacing="1" bgcolor="white">
<tbody>
<tr>
<td><a href="java script: amplia();" onclick="abre('http://imagestore.saiswa.com/saiyine/sa-super-saiyan-raditz.jpg','RADITIZ','IMAGES GOOGLE','800','600')"><img src="http://tbn0.google.com/images?que=tbn:m-xrANINThpv-M:http://imagestore.saiswa.com/saiyine/sa-super-saiyan-raditz.jpg"></a></td>
<td><a href="java script: amplia();" onclick="abre('http://www.sequenz.ch/files/_galleries/gallery/screenshots/php5-on-mac.png','PHP5','PHP &copy;','700','500')"><img src="http://tbn0.google.com/images?que=tbn:Wt8sW9nCyatl7M:http://www.sequenz.ch/files/_galleries/gallery/screenshots/php5-on-mac.png"></a></td>
<td><a href="java script: amplia();" onclick="abre('http://www.programujte.com/galerie/200609212117_databaze-php5.png','DATA BAZE','GOOGLE','600','400')"><img src="http://tbn0.google.com/images?que=tbn:QYS78X1RJrGilM:http://www.programujte.com/galerie/200609212117_databaze-php5.png"></a></td>
</tr>
</table>
</body>
</html>

Jessy · Junho 28, 2007

:o clenir dos santos!!

valewwwwwwwwwwwwwwwwwwwwwwwwwwwwww dimais pelo codigo!!

exatamente o que eu tava procurando ;)

abraçussss

Entrar

Expandir Foto Ao Clikar Sobre Ela

Pergunta

juliano.ma

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

fahledu

Link para o comentário

Compartilhar em outros sites

Visitante

Link para o comentário

Compartilhar em outros sites

Guest Visitante

Link para o comentário

Compartilhar em outros sites

Zero Cool

Link para o comentário

Compartilhar em outros sites

juliano.ma

Link para o comentário

Compartilhar em outros sites

Jessy

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades