Как при клике на картинку вывести её в большом блоке?

Question

[Muranx]

Не могу никак придумать, как загружать картинку в "просмотрщик" при клике. Для большего понимания, сделал минималистичный дизайн, который отражает суть проблемы, код можно скопировать прямо в code-pen.io, чтобы было всё нагляднее:
HTML:

<div class="wrapper">
    <div class="sliderWindow"></div>
  
  <div class="miniImgWrap">
        <div class="miniImg"></div>
        <div class="miniImg"></div>
        <div class="miniImg"></div>
   </div>
</div>

CSS:

.wrapper{
  width: 300px;
  height: 300px;
  border: 1px solid;
}

.sliderWindow{
  width: 90%;
  height: 70%;
  margin: 10px auto;
  border: 1px solid;
}

.miniImgWrap{
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.miniImg{
  width: 60px;
  height: 60px;
  border: 1px solid;
  display: inline-block;
}

Ну и собственно JS, комментарии для пояснения, что и для чего прямо в коде:

sw.document.getElementById("sliderWindow"); // большая картинка
mi.document.getElementsByClassName("miniImg"); //маленькие картинки

var arrOfImg=["1.jpg", "2.jpg", "3.jpg"]; //массив с картинками

function startImg(){ //фукнция для вставки начальных картинок в маленькие окошечки (т.е. маленькие картинки)
    for(var i=0; i<mi.length; i++){
        mi[i].style.backgroundImage="url(img/"+arrimg[i]+")"
    }
};


for(var k=0; k<mi.lenght; k++){ //а вот собственно висяк, никак не приходит в голову, как можно присвоить при клике значение backgroundImage маленькой картинкИ В большую картинку
  mi[k].onclick=function(){/*...*/} // (*)
};

Соственно добавить нечего, ответ прошу написать на таком-же топорном JS коим написан вопрос (ну разумеется грамотно), так-как я не знаю ни jquery ни react ни node.js , и имя своей кошки тоже не знаю! Спс

Answer 1

[alex]

Comments

[Alex Clear]

А я вот все думаю, for же не знает, когда будет сделан click, разве это не значит, что k всегда будет последним элементом? То есть при клике, k всегда будет равна 2, разве нет?

[Muranx]

sw.style.backgroundImage = e.target.style.backgroundImage

то-есть получается вы присваиваете значениЮ background большой картинки, значениЕ background маленькой картинки?

[alex]

Muranx, да. Можно заморочиться и в маленькие блоки грузить маленькие лёгкие превьюхи, а в большую в полном размере

[Muranx]

Alex, спасибо в очередной раз за помощь, отмечу вас как ответ (т.к. то, что нужно), на сегодня лимит вопросов исчерпан, завтра продолжу! Удачи вам!

[alex]

Alex Clear, нет. вы были бы правы если к находилась бы внутри обработчика

Answer 2

[MamaLuyba]

если порядок больших картинок не меняется, то можно на клик присваивать картинку из массива с картинками.

for(var k=0; k<mi.lenght; k++){ //а вот собственно висяк, никак не приходит в голову, как можно присвоить при клике значение backgroundImage маленькой картинкИ В большую картинку
  mi[k].onclick=function(){
  mi[k].style.backgroundImage = arrOfImg[k];
} // (*)
};

Comments

[Muranx]

Хм, боюсь вас запутать глупыми объяснениями, но это черновик слайдера, в идеале я его буду делать как просмотрщик автомобилей на сайте drom.ru , там разумеется и маленькие картинки меняются! Если вы конечно меня поняли

Answer 3

[Alfieros]

Мб тогда готовое решение в виде slick slider или owlCarousel? - Они имеют такой же функционал, что и у вас на картинке.

Comments

[Muranx]

хм, учитывая то, что я вообще не понимаю про какие типы слидеров вы говорите, поэтому можете конечно предлагать то, что вы считаете нужным!