Как сделать кликабельные превью изображения?

Question

[kicherov_maxim]

Добрый день. на сайте есть много маленьких дивов с уменьшенными изображениями, и большой див в который я хочу выводить изображение на которое кликнули. чтобы было понятнее вот сайт https://kicherov.000webhostapp.com/ , собственно как изменить background-image по клику на див? изображений будет довольно много, нужно для каждого прописывать событие клика? помогите пожалуйста

Answer 1

[Kim_Soal]

если правильно понял

если я правильно понял, как-то так

var divs = document.querySelectorAll(".thumbnails-container > div");
var cont = document.getElementById("container-1-1");

for(var i = 0 ; i<divs.length; i++){
   divs[i].onclick = function(){
      cont.style.backgroundImage = this.style.backgroundImage;
   }
}

Comments

[kicherov_maxim]

огромнейшее вам спасибо! работает

[kicherov_maxim]

а можете еще подсказать, чтоб по этому же клику, вверху менялся номер открытого снимка, где 1/30... например по второму кликнули 2/30 стало и так далее

Answer 2

[Recardo_Recoly]

jsfiddle.net/65Ggv/16

PS: Картинки из гугла по запросу cat icon

//Большая картинка
 <img id="dev" src="https://image.freepik.com/free-icon/no-translate-detected_318-52837.jpg"/>
 
 //мелкие картинки
 <img onclick="imgCH(this);" src="https://cdn1.iconfinder.com/data/icons/animals-18/154/cat-seat-skin-body-animal-512.png">
 
  <img onclick="imgCH(this);" src="http://icons.iconarchive.com/icons/sonya/swarm/256/Cat-icon.png">
   <img onclick="imgCH(this);" src="https://d30y9cdsu7xlg0.cloudfront.net/png/1836-200.png">

function imgCH(imgDIV)
{
   document.getElementById("dev").src = imgDIV.src;
}

-----------------------------------------------------------------------------------
Для background-image:
HTML:

<img id="dev" style="background-size: cover; background-image: url(https://image.freepik.com/free-icon/no-translate-detected_318-52837.jpg);"/>
 
 
 <img onclick="imgCH(this);" style="background-size: cover; background-image: url(https://cdn1.iconfinder.com/data/icons/animals-18/154/cat-seat-skin-body-animal-512.png);">
 
  <img onclick="imgCH(this);" style="background-size: cover; background-image: url(http://icons.iconarchive.com/icons/sonya/swarm/256/Cat-icon.png);">
   <img onclick="imgCH(this);" style="background-size: cover; background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/1836-200.png)">

JS

function imgCH(imgDIV)
{
   document.getElementById("dev").style.backgroundImage = imgDIV.style.backgroundImage;
}

Comments

[kicherov_maxim]

у меня большая картинка в background-image прописанна, получится сделать так?

[Recardo_Recoly]

jsfiddle.net/65Ggv/17 <- Пример на "background-image"

Код выше добавлю