[Resolvido] Abrir imagens ser refresh

[Francispansa 6]

Pessoal, eu estou com a seguinte dúvida.

 

Já estou pesquisando isso a dias e ainda não obtive sucesso.

 

Bom, eu tenho uma pagina onde mostram os detalhes de um produto por exemplo, e esse produto tem varias imagens.

Uma imagem de 400X300(Imagem de tamanho médio) e abaixo dela são listados os thumbnails das outras imagens.

 

Então o que preciso é que quando o usuario clicar em um dos thumbnails a imagem de 400x300 mude conforme o thumb clicado.

 

Eu não sei como fazer essa troca sem dar o refresh na pagina, acho que podeira fazer com jquery+php mas não sei como.

 

Caso alguem possa me dar uma força fico grato.

 

Att,

Francis.

[gremio10 14]

Pesquisa por lightbox.

 

Felipe

[Francispansa 6]

Pesquisa por lightbox.

 

Felipe

 

Fala Felipe, blza?

 

Bom cara, não é o efeito lightbox q eu quero.

 

Meu problema é q meu cliente quer que as imagens dos produtos tenham tres tamanhos

(120x100 'thumbnails' - 400x300 'imagens medias' - Imagem original)

 

Então quando for clicado em um dos thumbnails, a imagem media altere para o thumb clicado tipos os produdos do mercado livre sabe, tem a imagem de tamanho medio, os thumbs em baixo saco? =)

 

Na questão do lightbox eu nao tenho problema algum, meu problema é a troca da imagem media.

 

Mas de qualquer forma, valeu.

 

Abrass

[gremio10 14]

Saquei , jah fiz algo parecido com isso .

 

Olha uma alternativa é usar iframe.

 

sei que é ultrapassado , mas ajuda.

 

nos mantem informados.

 

Felipe

[Francispansa 6]

Bom, eu vo dah mais uma procura antes de usa iframe..hehe

 

E se alguem tive uma ideia de como posso fazer isso me avise.

 

Mas em ultimo caso neh.. :P

 

Abrass

[Hykaro Curcioli 0]

Olá Francispansa.

 

Eu estava com esse mesmo problema que voce.

 

Fiz o seguinte, usei um codigo em JAVASCRIPT.

 

Funciona assim:

 

Voce coloca o JAVASCRIPT no começo da pagina (uma coisa bem obvio)

<script language="JavaScript">

function ImgOver(valor)
{
document.img.src = ''+valor+'';
}
</script>

 

 

Depois voce vai criar uma imagem que seria a de tamanho médio

<img src="images/img.jpg" width="448" height="336" name="img" id="img"/>

 

Depois voce cria as thumbnails.

<a href="img" onclick="ImgOver('images/img1.jpg')"><img src="images/img1.jpg" width="100" height="74" style="border:#000000 1px solid;" /></a>

 

O que ele faz, ele abre as thumbnails que voce clica, ele abre na imagem tamanho medio.

 

 

Espero que tenha ajudado, qualquer coisa posta ai que nois tenta resolve.

[Francispansa 6]

Consegui resolver isso com javascript.

 

Meu arquivo ficou da seguinte forma.:

 

Função javascript

 

<script type="text/javascript">
  function MudarImagem(Caminho){
     document.getElementById('img_grande').src = Caminho;
  }
</script>

Imagem e thumbs no meu body

 

<div id="id_img_maior">
<img src="fotogrande.jpg" width="400" height="300" id="img_grande" />
</div>

<div id="thumbs">

<a href="javascript:MudarImagem('imagens/fotogrande1.jpg')"><img src="imagens/fotopequena1.jpg" alt="Miniatura 1"></a>
<a href="javascript:MudarImagem('imagens/fotogrande2.jpg')"><img src="imagens/fotopequena2.jpg" alt="Miniatura 2"></a>
<a href="javascript:MudarImagem('imagens/fotogrande3.jpg')"><img src="imagens/fotopequena3.jpg" alt="Miniatura 3"></a>

</a>

</div>

Quem me deu essa dica foi o LeoB do fórum wmonline.

 

Espero que isso ajude muita gente como me ajudou.

 

Abrass

 

Olá Francispansa.

 

Eu estava com esse mesmo problema que voce.

 

 

Hykaro valeu pelo toque, estive vendo esse script que você postou e é bem parecido com o que consegui para resolver meu problema.

 

Bom, valeu pela dica.

 

Fica ai para mais pessoa que tiveram ou terão esse probleminha como nós.. hehe

 

Abraço