Jump to content
Fórum Script Brasil
  • 0

Ajuda na solução


Cristian Munhoz

Question

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

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
Guest --Cristian --

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.8k
×
×
  • Create New...