Como posso colocar determinadas imagens numa div usando jquery através de um clique no botão?
Segue o html:
<div>
<button id="btn2015" class="btn">2015</button>
<button id="btn2014" class="btn">2014</button>
<button id="btn2013" class="btn">2013</button>
<button id="btn2012" class="btn">2012</button>
</div>
<div id="conteudo">
</div>
Dependendo de cada botão clicado, a div conteudo será esvaziada e serão colocadas as imagens de acordo com o botão. Seguem os nomes das imagens:
imagem_piscina_2015.jpg
imagem_sala_2015.jpg
imagem_escrito_2015.jpg
Além dessas, existem várias outras com o mesmo nomes, só os anos terminando com os anos diferentes. Como posso fazer com que cada botão, chame apenas as imagens de acordo com os seus respectivos anos?
<button id="btn2015" class="btn" data-img="/imgs/imagem_piscina_2015.jpg">2015</button>
, assim no evento click, você ler o atributo e da um append nadiv#conteudo
, ou já deixa uma imagem lá(com display:none), e troca o src com jquery($("img").attr("src",link_img)
e da um efeito nela para aparecer, comfadeIn(x)
onde x é o tempo em MS.