(Resolvido) Marcar thumbnail ao clicar

Renan Mafra · Abril 9, 2015

Olá pessoal, bom dia.

To com o seguinte problema que não estou conseguindo resolver.
Estou fazendo uma pequena galeria de fotos com até no máximo 20 thumbnails, ao clicar no thumb eu gostaria que aparecesse uma borda
sinalizando que a pessoa clicou naquela foto, e ao clicar em outra acontecesse a mesma coisa, marcando sempre a thumb atual.

Eu pensei fazer com um javascript que acionasse o CSS, está em negrito no código, mais serve da maneira que for melhor.

Agradeço pela atenção.

Segue o meu código:

<html>

<head>

body {

background-color: #000;

}

#apDiv1 {

position:absolute;

left:631px;

top:185px;

width:55px;

height:37px;

z-index:1;

}

#apDiv2 {

position:absolute;

left:741px;

top:185px;

width:55px;

height:37px;

z-index:1;

}

#linha{

border:solid;

border-color:#FFF;

border-width:1px;

}

</style>

</head>

<body>

</body>

</html>

wootzor · Abril 9, 2015

Com jQuery é relativamente simples:

$(function() {
    $("img").click(function() {
        $("img").not(this).removeClass("linha");
        $(this).addClass("linha");
    });
});

Fica um exemplo. Alterei o ID linha para uma classe pois não deves ter dois elementos com o mesmo ID num documento HTML.

Editado Abril 9, 2015 por wootzor

Renan Mafra · Abril 9, 2015

Olá wootzor,

Já vou trabalhar em cima. Muito obrigado pela ajuda !

Abrs.

Renan Mafra · Abril 9, 2015

wootzor, só apareceu um problema.

Qualquer imagem aparece o efeito border, mesmo nas que não tem nada a ver, como faço que só aconteça isso nas imagens das thumbnails ?
Tem como colocar um id, name, label ?

Renan Mafra · Abril 9, 2015

Amigo,

eu fiz assim:

$(window).load(function(){

$(function () {

$('.tumb').click(function () {

$('.tumb').not(this).removeClass("linha");

$(this).addClass("linha");

});

});//]]>

e nas imagens coloquei a class tumb assim:

Tá certo ? Funcionou, mais está correto ?

wootzor · Abril 10, 2015

É verdade, foi distracção minha. Estou a utilizar o selector geral para todos os elementos imagem. Sim, com uma classe como tens parece-me o procedimento certo.

Renan Mafra · Abril 10, 2015

Mais uma vez, muito obrigado pela ajuda.

Grande abraço !!!

Renan Mafra · Maio 25, 2015

Olá pessoal,

Estou com um problema, que é exatamente o mesmo de quando criei este tópico. É uma galeria de fotos. Que quando o usuário clicar no tumbnail o mesmo
fica com o border ativado e uma imagem é carregada dentro de uma DIV, e assim consequentemente... Tudo OK, mais eu preciso que quando a página
carregue, a primeira tumb já esteja acionada junto com a primeira imagem já carregada dentro da DIV. Como faço isso pessoal ? quem puder me ajudar
agradeço desde já ! Segue o código abaixo:

///////// JS

$(document).ready(function() {

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

event.preventDefault();

$("#imagem").html($("<img>").attr("src", this.href));

});

$(window).load(function(){

$(function () {

$('.tumb').click(function () {

$('.tumb').not(this).removeClass("linha");

$(this).addClass("linha");

});

///////// CSS

#imagem {

position:absolute;

left:11px;

top:798px;

width:856px;

height:879px;

z-index:1;

text-align:center;

}

.linha {

border:solid;

border-color:#999;

border-width: 1px;

}

#tumbnails {

position:absolute;

left:15px;

top:695px;

width:863px;

height:78px;

z-index:1;

}

/////// HTML

<tr>

</tr>

<tr>

</tr>

</table>

</div>

//////// DIV Aonde irá aparecer as fotos

Editado Maio 25, 2015 por Renan Mafra

wootzor · Maio 25, 2015

Experimenta assim.

$(document).ready(function() {
	$("#imagem").html($("<img>").attr("src", $("img").first().parent("a").attr("href")));
	$("img").first().addClass("linha");
	$(".imagem").click(function(event) {
		event.preventDefault();
		$("#imagem").html($("<img>").attr("src", this.href));
	});
	$('.tumb').click(function() {
		$('.tumb').not(this).removeClass("linha");
		$(this).addClass("linha");
	});
});

Editado Maio 25, 2015 por wootzor

Renan Mafra · Maio 27, 2015

Olá Wootzor,

Eu quebrei um pouco a cabeça aqui, por que inseria o JS e não funcionou de primeira, mais depois vi por que... O primeiro elemento de
imagem não era o relacionado ao código, foi só colocar as tumbs dentro da div tumbnails mais acima do código tornando a primeira tumb
como o primeiro elemento de imagem da página, funcionou 100%.

Wootzor, mais uma vez muito obrigado pela sua inestimável ajuda !
Obrigado mesmo pelo help.

Grande abraço !!!!

Entrar

(Resolvido) Marcar thumbnail ao clicar

Pergunta

Renan Mafra

Link para o comentário

Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

wootzor

Link para o comentário

Compartilhar em outros sites

Renan Mafra

Link para o comentário

Compartilhar em outros sites

Renan Mafra

Link para o comentário

Compartilhar em outros sites

Renan Mafra

Link para o comentário

Compartilhar em outros sites

wootzor

Link para o comentário

Compartilhar em outros sites

Renan Mafra

Link para o comentário

Compartilhar em outros sites

Renan Mafra

Link para o comentário

Compartilhar em outros sites

wootzor

Link para o comentário

Compartilhar em outros sites

Renan Mafra

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades