Pop-up De Imagens

WeBCriative · Dezembro 9, 2006

aew glra!!

gostaria que me ajudasse!!

estou criando um site e gostaria de um um script e como usa-lo para : ter varias imagens la e ao clicar nelas abrir uma poup-up do tamanho da imagem, como nesse site:

http://www.anjosdoamor.com.br/servicos.htm#

me ajudem por favor, sou novo no forúm, mais estou pedindo o codigo e as alterações que seraum necessarias nele e como localizalos no site.

:(

espero anciosamente resposta!!

obrigado

> Renner

.Andreia. · Dezembro 10, 2006

http://scriptbrasil.com.br/forum/index.php?showtopic=88584

WeBCriative · Dezembro 10, 2006

AEW ANDREIA! eu já tinha visto esse tópico, o problema e que não dei conta de aplicar, sei que devo jogar no code do dreamweaver, mais num sei em que lugar do codigo? como posicionar a imagem no codigo? peço ajuda, e c também tiver como estar me ajudando via MSN??

mais vlw!!

e espero sua resposta!

:blink:

.Andreia. · Dezembro 10, 2006

O que eu passei foi um exemplo, veja que a imagem está estatica, se voce tiver mais imagens vai precisar adaptar.

o script voce pode colocar em qualquer lugar da pagina, ai voce joga a função view('SUA_IMAGEM.jpg','') onde voce precisar

qualquer coisa posta o codigo pra vermos

WeBCriative · Dezembro 10, 2006

Andréia, vlw!! mas pode deixar, você acha que eu já sako de java script ou mexer no code html do dreamweaver, mais e ai que está meu maior problema num do code do html, de localizar na pagina!!

mais vlw por ter me respondido!! muito obrigado, agora c você tiver paciencia para me explicar por MSN, me fala que eu te passo o meu e você add!!

mais por tudo aew vlw!! :huh:

.Andreia. · Dezembro 10, 2006

então, eu não to dizendo que voce conhece ou não javascript. É que te passando a ideia fica mais facil voce entender. Eu não uso dreamweaver e não posso te dizer exatamente quais os procedimentos que serao necessarios, creio que é só copiar colar.

Bom, melhorando o codigo que eu postei no link, já resgatando a imagem por URL:

<html>
<head>
<script language="javascript">
function view(picture,comment){
var url = 'pop_up.html?foto=' + picture;
popup = window.open(url,'simpleplan','scrollbars=no,status=no,toolbar=no,resizable=yes,location=no,menu=no,width=100,height=100');
popup.focus();
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td width="20" align="center" valign="middle"><a href="java script:view('imagem1.jpg','');"><img src="imagem1.jpg" alt="" width="100" height="75" border="0" /></a></td>
<td> </td>
<td align="center" valign="middle"><a href="java script:view('imagem2.jpg','');"><img src="imagem2.jpg" alt="" width="100" height="75" border="0" /></a></td>
<td> </td>
<td align="center" valign="middle"><a href="java script:view('imagem3.gif','');"><img src="imagem3.gif" alt="" width="100" height="75" border="0" /></a></td>
</tr>
</table>
</body>
</html>

pagina pop_up.html

<html>
<head>

<script language="javascript">
function Resize()
{
	var ResizeH,ResizeW;
	LargeurFenetre = document ['ImageAAfficher'].width + (2*parseInt(50));
	HauteurFenetre = document ['ImageAAfficher'].height + (2*parseInt(50));

	var OffH, OffW;
	if (document.all)
	{
		OffH = document.body.clientHeight;
		OffW = document.body.clientWidth;
	} else 	{
		OffW = innerWidth;
		OffH = innerHeight;
	}

	ResizeH = HauteurFenetre - OffH;
	ResizeW = LargeurFenetre - OffW;

	window.resizeBy(ResizeW,ResizeH);
}

function ExibeImagem(){
var query=window.location.search;
if(query.indexOf("?") == -1) {
document.write("Foto não localizada.");
}
else {
var str="?foto=";
var imagem = query.slice(str.length);
var imprime_imagem = "<img src='" + imagem + "' name='ImageAAfficher' border='0' onload='Resize();'>";
document.getElementById("exibe_imagem").innerHTML = imprime_imagem;
}
}
</script>

</head>
<body onload="ExibeImagem()">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td align="center" valign="middle"><div id="exibe_imagem"></div></td>
	</tr>
</table>
</body>
</html>

ps.: vamos manter tudo pelo forum pois assim outras pessoas poderao ajudar tambem, alem de manter um historico para outras que venham a ter a mesma duvida que a sua.

WeBCriative · Dezembro 10, 2006

é você esta certa e melhor conversar so por forum mesmo!!

mais ia aew vamu ver c eu intendi:

no seu ultimo post ai você postou duas coisas, o "quote" e "pagina de pop_up.html",

esse primeiro codigo "quote" eu devo jogar na pagina das miniatiras de imagens, e depois crio outra pagina e coloco esse codigo da "pagina de pop_up.html" ? e isso e??

e em cada codigo desse o que deve subistituir?

obrigado!!

.Andreia. · Dezembro 10, 2006

Isso, o primeiro codigo (quote) voce joga na sua pagina onde tem as miniaturas e pop_up.html é onde serao exibidas do tamanho das imagens.

O nome do arquivo voce pode mudar pra qualquer coisa, lembrando de alterar no link que o chama na pagina principal.

O que você deve substituir é isso, nome do arquivo, nome das imagens (que eu deixei como exemplo imagem1, imagem2,...) e o layout.

ANDRE_GUSTAVO · Julho 28, 2009

Olá, gostaria de ajuda para fazer a popup abrir com tamanho automatico.

Utilizei o exemplo citado pela Andreia, mas não deu certo.

vejam meu codigo

pagina com as miniaturas eu coloquei

<script language="javascript">
function view(picture,comment){
var url = 'foto_grande.asp?foto_grande='+ picture;
popup = window.open(url,'simpleplan','scrollbars=no,status=no,toolbar=no,resizable=yes,location=no,menu=no,width=100,h
eight=100');
popup.focus();
}
</script>

no link coloquei:

<a href="java script:view('/sgw/imgs_quadros/<%=rs("foto_grande")%>','');"><img src="/sgw/imgs_quadros/<%=rs("foto")%>" border="0" /></a>

na popup coloquei assim:

<script language="javascript">
function Resize()
{
var ResizeH,ResizeW;
LargeurFenetre = document ['ImageAAfficher'].width + (2*parseInt(50));
HauteurFenetre = document ['ImageAAfficher'].height + (2*parseInt(50));

var OffH, OffW;
if (document.all)
{
OffH = document.body.clientHeight;
OffW = document.body.clientWidth;
} else {
OffW = innerWidth;
OffH = innerHeight;
}

ResizeH = HauteurFenetre - OffH;
ResizeW = LargeurFenetre - OffW;

window.resizeBy(ResizeW,ResizeH);
}

function ExibeImagem(){
var query=window.location.search;
if(query.indexOf("?") == -1) {
document.write("Foto não localizada.");
}
else {
var str="/sgw/imgs_quadros/<%=varID%>";
var imagem = query.slice(str.length);
var imprime_imagem = "<img src='" + imagem + "' name='ImageAAfficher' border='0' onload='Resize();'>";
document.getElementById("exibe_imagem").innerHTML = imprime_imagem;
}
}
</script>

no local a ser exida a imagem

<div id="exibe_imagem"></div>

a pagina é carregada com erro:

Linha: 48

Caracter: 119

Erro: CONSTANTE DE SEQUENCIA NÃO FINALIZADA

URL: img_galeria.asp

img_galeria.asp é a página das miniaturas

a linha indicada pelo erro, contem codigo css e não javascript, o que tem haver o css com a popup???

Desde já obrigado a todos!!!!!

ANDRE_GUSTAVO · Julho 29, 2009

HEEEELP MEEEEE PLEEEEAAAASEEE!!!!

AJUDA EU GALERA!!

OBRIGADO

Jonathan Queiroz · Julho 30, 2009

HEEEELP MEEEEE PLEEEEAAAASEEE!!!!
AJUDA EU GALERA!!
OBRIGADO

André, peço que não poste up's, de acordo com a regra 3.8 (ver regras)

3.8 Não é permitida a postagem de mensagens com a finalidade de manter o tópico no início da lista (up), nem de mensagens que não se refiram ao assunto do tópico (flood). Caso isso ocorra, as mensagens serão excluídas e os autores, advertidos.

jacknx55 · Dezembro 23, 2009

Eu faço de um jeito bem bacana . eu uso o uma galeria lightbox se quiser te envio os arquivos ..

Entrar

Pop-up De Imagens

Pergunta

Link para o comentário

Compartilhar em outros sites

11 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns