(Resolvido) Marcar thumbnail ao clicar

Renan Mafra · April 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 · April 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.

Edited April 9, 2015 by wootzor

Renan Mafra · April 9, 2015

Olá wootzor,

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

Abrs.

Renan Mafra · April 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 · April 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 · April 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 · April 10, 2015

Mais uma vez, muito obrigado pela ajuda.

Grande abraço !!!

Renan Mafra · May 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

Edited May 25, 2015 by Renan Mafra

wootzor · May 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");
	});
});

Edited May 25, 2015 by wootzor

Renan Mafra · May 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 !!!!

Sign In

(Resolvido) Marcar thumbnail ao clicar

Question

Renan Mafra

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

wootzor

Link to comment

Share on other sites

Renan Mafra

Link to comment

Share on other sites

Renan Mafra

Link to comment

Share on other sites

Renan Mafra

Link to comment

Share on other sites

wootzor

Link to comment

Share on other sites

Renan Mafra

Link to comment

Share on other sites

Renan Mafra

Link to comment

Share on other sites

wootzor

Link to comment

Share on other sites

Renan Mafra

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity