Placing images in a div with jquery

An alternative to the others for your case is:

  

@Edit : Following some suggestions, indicated by the friend @Sergio, considerable improvement in the code, follows changed

var imagens = {
  2015: ['http://www.sulandes.com.br/painel/arquivos/categorias/7cbcd56e187b498d6dd7603cd8250b24.png', 'http://4.bp.blogspot.com/-0FEJMBAc71c/VJbkENOA6qI/AAAAAAAAD2I/uYQiy_Xo5Us/s1600/2015-feliz%2Bano%2Bnovo-16.png'],
  2014: ['http://www.asacd.org.br/images/2014-calendrier.jpg', 'http://www.rio2016.com/sites/default/files/imagecache/switcher_710x450_rounded_corners/2014-foto_0.jpg'],
  2013: ['http://aclumontana.org/wp-content/uploads/2014/01/2013.jpg', 'http://www.jornalistasconcurseiros.com.br/blog/wp-content/uploads/2013/01/2013.jpg']
};

document.addEventListener('click', function(e) {
  var id = e.target.id;
  if(['2015', '2014', '2013'].indexOf(id) !== -1) {
    var conteudo = document.getElementById('conteudo');
    conteudo.innerHTML = '';
    Array.prototype.forEach.call(imagens[id], function(arr) {
      var img = document.createElement('img');
      img.src = arr;
      conteudo.appendChild(img);
    });
    console.log(conteudo);
  }
});

div img {
    width: 100px;
}

<button id="2015">2015</button>
<button id="2014">2014</button>
<button id="2013">2013</button>
<div id="conteudo"></div>

In this code we have declared a images object containing attributes with name for the year and value containing an array with the url of the images. It also declared an event listener to detect click events for buttons, this event calls a function that checks the year, clears the previous content and traverses the array, creates elements <img> by assigning the url to its src .

  

See working here at jsfiddle

Here's a suggestion:

var imagens = ['imagem_piscina_2015.jpg',
    'imagem_sala_2015.jpg',
    'imagem_escrito_2015.jpg'];

function criarImagem(nr) {
    return imagens.map(function (src) {
        var img = document.createElement('img');
        img.src = src.split('2015').join(nr);
        return img;
    });
}
$('button').on('click', function () {
    var ano = this.id.slice(3);
    $('#conteudo').html(criarImagem(ano));
});

jsFiddle: link

This code causes each time a button is loaded to extract the year and pass it to a function. This function creates images (so many urls / names are given) and then inserts them into the #conteudo div, rewriting its contents.

I suggest you adapt $('button') to be more accurate in the selector and also put the correct url in the images to point to the right place. In this array or within the function, you would see a configuration variable.

I suggest you create an array, where the indices will be the years, and the values their respective images, something like:

arr['2015'] = "imgs/img_de_2015, imgs/img2_de_2015";

arr['2016'] = "imgs/img_de_2016, imgs/img2_de_2016";

and in the click event of the button, you get the year in which it refers (this you can put in the attribute date-year for example).

<button class="btn_ano" data-ano="2015">2015</button> $("button.btn_ano").click(function(){ ano = $(this).attr('data-ano'); imgs_arr = arr[ano].split(","); });

And right after that, make a loop to put the images in the view, type:

$(imgs_arr).each(function(i){ $("div#conteudo").append("<img src='"+imgs_arr[i]+"'/>"); });

Of course, if it gets slow (lots of images), you can move to a variable, and only then give an append to div#conteudo .

Something like:

imgs_html = ""; $(imgs_arr).each(function(i){ imgs_html.= "<img src='"+imgs_arr[i]+"'/>"; }); $("div#conteudo").append(imgs_html);

I hope I have helped!