Ajuda na solução

Cristian Munhoz · Novembro 28, 2007

Pessoal estou desenvolvendo um sistema online de venda de foto para um cliente, o mesmo me solicitou que ao mostrar o thumbs das fotos em linhas e coluna quando o cliente clicar na foto, terá que abrir um pop-up no centro da tela para o cliente visualizar a foto e adicionar no carrinho, até ai tudo, o problema esta sendo em acha uma solução boa nessa logica, pensei em usar POPUP com javascript window.open() passando parametros na função, até fiz isso, mas temos o problema caso o cliente tenha popup bloqueado, então estou pedindo ajuda de vocês caso tenha alguma ideia, e se algume sabe algum código que possa fazer isso com DIV, fazer com que abra um div depois que ele clicar na foto.

Se alguém puder me ajudar, fico grato

Obrigado

Cristian

KaKarotto · Novembro 29, 2007

Eu conheço duas formas de você resolver isso ae Cristian. Uma fácil e outra que vai exigir um pouco mais de conhecimento.

A mais fácil é mexer nesse código e mostrar a imagem como um link e fazer ele abrir em outra janela usando o atributo target="_blank". Dessa forma você teria que mexer um pouco na formatação para que fique bonitinho na página nova.

Eu acho essa solução mais prática, porém não é a mais xique...Eu não aconselho usar pop up centralizado, além do fato do navegador bloquear, ainda existem pessoas (como eu ) que abrem novas páginas só em guias, ou abas, elas não vão ver janela centralizada alguma.

A outra forma é usar Ajax. Mas vai ter que saber usar direito. Dessa forma você conseguiria abrir o banco de dados e enviar as informações para um div oculta, ou um div que você criaria dinamicamente.

Qual das formas vai ser? Se for Ajax me avisa, eu tento de dar uma forcinha.

Akelabrassssss

cassianooliver · Novembro 29, 2007

isso aqui pode te ajudar...

http://jquery.com/demo/thickbox/

KaKarotto · Novembro 29, 2007

Nossa eu to ficando demente....

Eu não li direito seu tópico Cristian, não vi que era apenas imagem que você queria carregar na div. Sendo assim, não é preciso Ajax nem nada disso que falei....

Vou te passar um código que fiz agorinha:

<html>
<head>

<style>

div#Foto{

position:absolute; top:25%; left:25%;
width:50%; height:50%;
border:1px solid silver;
display:none;
padding:100px;
}

div#Foto a{
float:right; 
font:8pt tahoma;
text-decoration:none;
position:absolute; bottom:0; right:5px;
color:#336699
}

div#Foto a:hover{
text-decoration:underline;
}

</style>

<script>
function abreImagem(){
imagemURL=this.src
imagemURL=imagemURL.split('/')
imagemURL="grande/"+imagemURL[imagemURL.length-1]

divFoto=document.getElementById('Foto')
divFoto.style.display="block"

divFoto.innerHTML="<center><img src="+imagemURL+" /></center>"
divFoto.innerHTML+="<a href='#' onclick=\"this.parentNode.style.display='none';this.parentNode.innerHTML=''\">Fechar</a>"
divFoto.innerHTML+=imagemURL
}


window.onload=function(){
thumbs=document.getElementById('tabela').getElementsByTagName('img')
for(x=0; x<thumbs.length; x++)
thumbs[x].onclick=abreImagem

}

</script>
</head>


<body>
<div id="Foto"></div>

<table id="tabela" border="1">
<tr>
<td><img src="thumb/youtube.bmp"></td>
<td><img src="thumb/Camiseta.jpg"></td>
<td><img src="thumb/Caderno.jpg"></td>
<td><img src="thumb/Livro.jpg"></td>
</tr>
</table>


</body>
</html>

Seguinte, isso não vai resolver seu problema, postei esse código apenas pra ilustrar e te ajudar numa alternativa para a solução.

O código não é genérico, precisa rodar sob algumas condições.

1- O código js pega todas as imagens existentes numa tabela de nome "tabela".

2- Coloca o atributo onclick em todas elas, direcionando para a função "abrirImagem".

3 - A função abrirImagem pega o elemento que a chamou e faz aparecer um div oculto e coloca dentro do div oculto a imagem mais um link para fechar (ocultar div novamente).

Esse script, funcionaria muito bem com as seguintes condições:

- você tem uma tabela chamada "tabela"

- você coloca as imagens em miniatura em uma pasta chamada "thumbs"

- você coloca as imagens grandes em uma pasta chamada "grande" onde, as imagens grandes tem o mesmo nome que as suas miniaturas, apenas diferenciando a pasta que estão localizadas.

Desculpe a minha falha inicial, é a mania de não ler as coisas direito. Pode escolher usar um framework como o amigo de cima mencionou, caso não tenha muita facilidade em mexer com javascript.

Pessoalmente não gosto de usar bibliotecas para fazer uma coisa ou outra, porque mesmo tendo poucos kb elas exigem muito do processador, no caso de pessoas com computadores lerdos, demoraria muito pra loadear a página.

Kelabrasssss

Novembro 29, 2007

Vlaue Galera, muito show isso, gostei das dicas, achei mais legal ainda o esquema do framework, estava até fazendo alguns testes com um framework chamado lightbox, mas estou me matando aqui para colocar nele dois alguns <input> até já implantei no codigo, esta funcionando e tudo, estou vendo agora o esquema para colocar dois button, duas caixas de texto e um combo, missão dificil, até coloquei dois button já, o problema esta sendo no posicionamento deles dentro da DIV que abre no centro, este framework TICKBOX é mais facil faer isso, eu cheguei a ver algum exemplo que nosso amigo passou no link e um deles tinha campos e combo dentro, mas não estava junto com imagem, alguém conhece algum framework que facilita nesse processo. Obrigado a todos pelas dicas

abraços

Cristian

cassianooliver · Novembro 30, 2007

a própria thickbox...

faça tudo que tem que fazer em um div...

depois é que ela será mostrada...

quando você chamar...

Entrar

Ajuda na solução

Pergunta

Cristian Munhoz

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

cassianooliver

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Guest --Cristian --

Link para o comentário

Compartilhar em outros sites

cassianooliver

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades