Clicando num link e exibindo uma imagem na mesma pagina

[Guh Ribeiro 0]

Bom galera to querendo fazer um negocio aqui.

 

No site eu tenho dois blocos os da esquerda e o da direta

 

O esquerda tem uma lista com os produtos e cada produto é um link que tem uma id e esta id corresponde a url de uma imagem exemplo id="produto.jpg", o bloco da direita tem um quadro que exibe uma imagem por padrão.

O que eu quero que aconteça é que quando clicar no link de um item do bloco esquerdo ele pegue o valor da id do link e altere o SCR da imagem do bloco da direita alterando assim a imagem sem nenhum reload completo da pagina.

 

Se alguem tiver uma outra sugestão sei que da pra fazer usando o .attr do jquery

[William Bruno 1501]

dá para fazer com jQuery sim. Qual é a sua dúvida ?

 

oq você já fez? oq você não sabe fazer ?

[Guh Ribeiro 0]

No mesmo site eu fiz um carossel com varias imagens pequenas e clica e abre a imagem grande,

Ai as imagens pequenas tem a class=foto_carroussel e o bloco onde abre a imagem grande tem uma imagem padrão com a id="foto_grande.

 

No principo pegar o scr de uma imagem e transferir para o outro scr eu consegui.

 

Agora nao consegui pegar um valor do id ou rel por exemplo e passar para o scr de outra imagem.

 

<script>
$('.foto_carroussel').click(function(){
   $("#foto_grande").attr("src",$(this).attr("src"))
})
</script>

[William Bruno 1501]

para passar o ID:

 

$('.foto_carroussel').click(function(){
   $("#foto_grande").attr("src",$(this).attr("id"))
});

[Guh Ribeiro 0]

Willian eu tentei isto não da certo criei o link

 

<a href="#" id="ACESSÓRIOS AUTOMOTIVOS/Bambo Orbe/7-Com-Monitor-grafite-.jpg" class="foto_carroussel">7" Monitor Grafite</a>

 

e aonde trocaria o scr

 

<div id="carro"><img src="../carros/CHEVROLET/Agile/DSC01255.jpg" width="358" height="269" id="foto_grande"></div>

 

Mais não funciona.

[William Bruno 1501]

e oq acontece de errado ?

o caminho está correto ?

 

 

aparece algo no console ?

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

 

note que essas pastas com espaços e acentos são por definição problemáticas. Seria muito melhor, q você não tivesse caracteres especiais, em nomes de pastas e arquivos.

[Guh Ribeiro 0]

Você testou um exemplo ai Willian?

 

Aqui não da erro nenhum no console e quando clica ele chama o link e muda insere o # do href na barra de endereço nada mais...

 

Tem alguma outra maneira de se fazer?

 

PS: alterei o nome da imagem para 7monitor.jpg para testar e nada.

[William Bruno 1501]

para impedir q altere a URL:

 

$('.foto_carroussel').click(function( e ){
   e.preventDefault();

   $("#foto_grande").attr("src",$(this).attr("id"));
});

não testei, mas tecnicamente, tem q funcionar, desde que o caminho esteja correto. Retire os espaços e acentos das pastas também.

 

ou então, aparecer um erro no console, assim q você clicar.

[Guh Ribeiro 0]

é willian realmente estranho não acusa erro algum.

 

tentei mudar o caminho das pastas também...

 

Veja este teste que fiz no JSFiddle também não funciona

 

 

http://jsfiddle.net/WdUfn/

[William Bruno 1501]

o correto seria assim:

 

http://jsfiddle.net/WdUfn/3/

 

funciona, viu ? :lol: