[Resolvido] Activar imagem

[nmoa]

boas

tenho um site em que tenho uma listagem de projectos

cada projecto ao carregar está a abrir o seu conteudo

agora gostaria de saber como posso em javscript ao carregar na imagem selecionada esta altere para uma class existente, para dar a ideia de que foi a escolhida

o meu codigo está assim :

$(".pegarTrabalho").click(function(event){
            event.preventDefault();
    var urlDestino = $(this).attr("href");

            $.get(urlDestino, {}, function(response){

                    $("#projectos_cnt").html(response).show();
    $('html, body').animate({scrollTop:200}, 'slow');
            })
    });

e a imagem com botão assim

<span class="link_post"><a href="projectos.php?id='.$final["id_works"].'" class="pegarTrabalho" alt="saiba mais" title="saiba mais"></a></span>

obrigado

Edited May 22, 2014 at 06:37 AM by brunoais
geshi

[lsoares]

à partida só tens de fazer:

$(this).addClass('selecionado');

isto assumindo que o clique foi na imagem.

Se não foi, é preciso procurar a imagem:

$('SELETOR_DA_IMAGEM').addClass('selecionado');

para saberes qual é o SELETOR_DA_IMAGEM, depende muito da forma como tens o HTML definido.

[nmoa]

isso tem que ter alguma condição para ele saber realmente que aquele click foi naquela imagem

isso em php conseguia na boa sacar com GET mas em javascript não estou a ver ....se repareares todas as imagens estão a ir buscar à bd atraves de while, e abrem no mesmo local a pagina projectos.php?id=(numero)

so preciso que em java ele saiba que se o id da pagina for igual ao id do click da imagem ele muda de class.

espero ter sabido explicar 🙂

obrigado

[lsoares]

tens uma página por projeto é isso? e ao navegar para lá queres saber o id. da clicada?

Edited May 21, 2014 at 06:19 PM by lsoares

[nmoa]

tens uma página por projeto é isso? e ao navegar para lá queres saber o id. da clicada?

sim tenho uma pagina que le todos os trabalhos e sim quando la chego quero que informe qual o id para poder activar um class diferente...do tipo opacity:0.5

[lsoares]

não percebi muito bem mas das três uma:

1. navegas de forma clássica e fazes uso da query string para saberes a classe/projeto/imagem a ativar
   
2. fazes uso de âncoras (com hash #) para saberes classe ativa
   
3. simulas navegação via Ajax, manipulando o DOM nesse sentido.
   

Não sei qual o caminho que queres seguir.. com base nisso a resposta varia.

[nmoa]

tens uma página por projeto é isso? e ao navegar para lá queres saber o id. da clicada?

é isto que quero

[lsoares]

ainda assim preciso da resposta à 2ª questão. vou subentender que queres navegar dentro da própria página (visto que tens aí um animate de scroll) e portanto a opção 2, o uso de hashes

nesse caso sugiro:

em vez disto href="projectos.php?id='.$final["id_works"].' ponhas algo tipo isto href="#'.$final["id_works"].'

para que queres isto? $.get(urlDestino, {}, function(response){ $("#projectos_cnt").html(response).show();

diria que basta fazer scroll para a posição desse elemento não?

http://www.abeautifulsite.net/blog/2010/01/smoothly-scroll-to-an-element-without-a-jquery-plugin/

se o projeto estiver noutro URL completamente diferente então não entendo o objetivo. tens de descrever melhor o que pretendes sob o ponto de vista do utilizador.

[nmoa]

ainda assim preciso da resposta à 2ª questão. vou subentender que queres navegar dentro da própria página (visto que tens aí um animate de scroll) e portanto a opção 2, o uso de hashes

nesse caso sugiro:

em vez disto href="projectos.php?id='.$final["id_works"].' ponhas algo tipo isto href="#'.$final["id_works"].'

para que queres isto? $.get(urlDestino, {}, function(response){ $("#projectos_cnt").html(response).show();

diria que basta fazer scroll para a posição desse elemento não?

http://www.abeautifulsite.net/blog/2010/01/smoothly-scroll-to-an-element-without-a-jquery-plugin/

se o projeto estiver noutro URL completamente diferente então não entendo o objetivo. tens de descrever melhor o que pretendes sob o ponto de vista do utilizador.

hello

aqui a questão é que tenho uma div escondida onde vai abrir o ficheiro projectos.php.....

tenho esse get para ele poder sacar o id do click e abrir o conteudo correcto

no ficheiro projecto depois tenho codigo php que vai buscar esse id e abre o conteudo desse trabalho.

podes ver o efeito aqui www.duitdesign.com/preview e carrega nos projectos

Edited May 22, 2014 at 09:52 AM by nmoa

[lsoares]

então o que tu provavelmente queres é (dado que estás a usar jQuery):

$('#divDestino').load(urlProjeto);

http://api.jquery.com/load/

[nmoa]

e como pego o id ?

[lsoares]

tens de colocá-lo previamente em server-side; no teu caso via PHP...

esta parte $final["id_works"] tem de ser colocada num atributo do tipo data por exemplo... ou numa classe ou ser o próprio id... (cuidado com o início com digitos)

se ele estiver disponível já podes fazer uso dele em client-side

PS. não vejo motivo para teres um elemento do tipo <a>

[nmoa]

já consegui de usando o data-id , obrigado

  $(".pegarTrabalho").click(function(event){

 event.preventDefault();
 var urlDestino = $(this).attr("href");
  var tester= $(this).data('id');
	   $.get(urlDestino, {}, function(response){
 $(".img_work"+tester+" img").addClass("select");

				    $("#projectos_cnt").html(response).show();
  $('html, body').animate({scrollTop:200}, 'slow');
		    })
    });

botão

<a data-id="'.$final["id_works"].'" href="projectos.php?id='.$final["id_works"].'" class="pegarTrabalho" alt="saiba mais" title="saiba mais"></a>

Edited May 23, 2014 at 10:50 AM by nmoa