Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite galera,
preciso que minha função receba o valor do atributo **src** de uma determinada imagem (dentre várias), e atribua esse valor capturado em outra imagem;
Tenho uma álbum de fotos, com vária miniaturas e uma imagem acima, grande, (sem src definido).
Ao clicar em uma das miniaturas quero que a mesma carrega na imagem grande;
Fiz um esquema gráfico que explica melhor
Muito obrigado pela ajuda meu amigo!!
eu gosto de fazer mais ou menos assim
<img src="" id="imgSetada">
<img src="img1.jpg" id="foto1" onClick="imgLoad(this.id);"><img src="img2.jpg" id="foto2" onClick="imgLoad(this.id);"><img src="img3.jpg" id="foto3" onClick="imgLoad(this.id);">
<script>
function imgLoad(id){
document.getElementById("imgSetada").src = document.getElementById(id).src;
}
</script>
e pode ainda criar uma função pra varrer uma pasta e adicionar as imagens na linha de imagens sem precisar botar uma a uma também@marsolim
Evita de usar camelCase (onClick != onclick) nos atributos inline do JS/HTML , alguns browser não suportam.
Fora isso é questão de gosto mesmo.
A técnica do inline é muito adotada por Frameworks do mercado hehe ng-click
>
18 minutos atrás, marsolim disse:
e pode ainda criar uma função pra varrer uma pasta e adicionar as imagens na linha de imagens sem precisar botar uma a uma também
Boa!
Ai mete um eventListener no class, algo assim, jQuery é para os fracos!
(brincadeira kkk to treinando pra ficar menos dependente dele kkk)
<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ativarAlert {
cursor: -webkit-grab;
}
</style>
</head>
<body>
<img src="https://avatars0.githubusercontent.com/u/4562367" id="img1" class="ativarAlert"/>
<img src="https://avatars2.githubusercontent.com/u/75607" id="img2" class="ativarAlert"/>
<script type="text/javascript">
var fields = document.getElementsByClassName("ativarAlert");
for (var i = 0; i < fields.length; i++) {
fields[i].addEventListener('click', function() {
alert(this.src);
}, false);
}
</script>
</body>
</html>
Demo:
[https://fiddle.jshell.net/yLmrfrao/](https://fiddle.jshell.net/yLmrfrao/)bem na verdade eu falava de pegar as imagens duma pasta e meter elas na lista de miniaturas que vai ser clicada hehehe tipo assim
<div id="imgList"></div>
var folder = "images/"; success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("#imgList").append( "<img src='"+ folder + val +"'>" );
}
});
}
});
aí não precisa colocar isso
src="img1.jpg" id="foto1" onClick="imgLoad(this.id);"><img src="img2.jpg" id="foto2" onClick="imgLoad(this.id);"><img src="img3.jpg" id="foto3" onClick="imgLoad(this.id);">
basta colocar a div que vai receber as imagens da pasta automaticamente e quando tiver mais imagens pra botar é só upar elas pra pasta e não precisa mexer no html mais, não sei se isso que tu também pensou pois me pareceu que entendestes que a ideia era pegar a lista de imagens colocadas no html heheheEntendi errado na 1x
Ai editei e escrevi 'boa' -> boa ideia hehe /BOAAAA
Olha o onClick novamente ali husahuhas
copiei a linha da postagem anterior
oh mas esse bagulho aí é doido pois já teve vez que o script só funfou com inicial do nome do evento maiúsculo tipo onClick, onBlur... isso uns anos atrás mas na verdade sempre usei maiuculo só nos atributos html porque dentro do js mesmo é preciso seguir as regras case do próprio hehehe
Muito obrigado marsolim!
Vou tentar usar seu código na minha aplicação.
Valeu!
Basicamente você pode deixar um Listener no evento 'click' ou mouseover do JS e chamar a função que bem enteder...
Ex:
<!DOCTYPE HTML>