БЛОГ НА HUSL


Реально ли сделать такую галерею на чистом CSS?

Автор вопроса: Arasaki 

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

var arrOfImg = [
  'https://picsum.photos/id/237/200/300',
  'https://picsum.photos/id/247/200/300',
  'https://picsum.photos/id/227/200/300'
]; //массив с картинками

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

startImg()

for (var k = 0; k < mi.length; k++) { //а вот собственно висяк, никак не приходит в голову, как можно присвоить при клике значение backgroundImage маленькой картинкИ В большую картинку
  mi[k].onclick = function(e) {
    sw.style.backgroundImage = e.target.style.backgroundImage
  } // (*)
};
.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;
}
<div class="wrapper">
  <div id="sliderWindow"></div>
  <div class="miniImgWrap">
    <div class="miniImg"></div>
    <div class="miniImg"></div>
    <div class="miniImg"></div>
  </div>
</div>

jsfiddle.net/4h7nqcs5/

Реально ли реализовать такую фотогалерею на CSS без использования скриптов?


Источник

Ответы (2 шт):

Автор решения: CbIPoK2513

Можно, но это костыли и нюансы, проще и красивее реализовать с использованием Javascript.

.img-tabs {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  border: 1px solid black;
  padding: 10px;
  box-sizing: border-box;
}

.img-tabs > input {
  display: none;
}

.img-tabs .full {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  border: 1px solid black;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.img-tabs .full > img {
  display: none;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
}

.img-tabs input:nth-child(1):checked ~ .full img:nth-child(1),
.img-tabs input:nth-child(2):checked ~ .full img:nth-child(2),
.img-tabs input:nth-child(3):checked ~ .full img:nth-child(3) {
  display: block;
}

.img-tabs .list {
  display: flex;
  flex-direction: row;
}

.img-tabs .list label {
  display: flex;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  box-sizing: border-box;
  cursor: pointer;
}

.img-tabs .list label:not(:last-child) {
  margin-right: 10px;
}

.img-tabs .list label > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-tabs input:nth-child(1):checked ~ .list label:nth-child(1),
.img-tabs input:nth-child(2):checked ~ .list label:nth-child(2),
.img-tabs input:nth-child(3):checked ~ .list label:nth-child(3) {
  border: 2px solid red;
}
<div class="img-tabs">
  <!---->
  <input id="img1" type="radio" name="img" checked>
  <input id="img2" type="radio" name="img">
  <input id="img3" type="radio" name="img">
  <!---->
  <div class="full">
    <img src="//i.imgur.com/5oYiQ7v.png">
    <img src="//i.imgur.com/EyF5jUQ.png">
    <img src="//i.imgur.com/LO0q2Pe.png">
  </div>
  <div class="list">
    <label for="img1"><img src="//i.imgur.com/5oYiQ7v.png"></label>
    <label for="img2"><img src="//i.imgur.com/EyF5jUQ.png"></label>
    <label for="img3"><img src="//i.imgur.com/LO0q2Pe.png"></label>
  </div>
</div>

→ Ссылка
Автор решения: Sevastopol'

Вариант с миниатюрами сверху:

.wrapper {
  position: relative;
  width: 200px;
  height: 270px;
  padding: 10px;
  border: 1px solid;
}

.wrapper>input {
  display: none;
}

.wrapper label {
  float: left;
  display: block;
}

.image {
  clear: both;
  position: relative;
}

.image>div {
  position: absolute;
  opacity: 0;
}

#mini-1:checked~.image>div:nth-child(1),
#mini-2:checked~.image>div:nth-child(2),
#mini-3:checked~.image>div:nth-child(3) {
  opacity: 1;
}

.image img {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid;
}

.wrapper label img {
  width: 50px;
  height: 50px;
  margin: 0 7px;
  border: 1px solid;
}
<div class="wrapper">
  <input type="radio" name="image" id="mini-1" checked />
  <label for="mini-1"><img src="https://picsum.photos/id/237/200/300"></label>
  <input type="radio" name="image" id="mini-2" />
  <label for="mini-2"><img src="https://picsum.photos/id/247/200/300"></label>
  <input type="radio" name="image" id="mini-3" />
  <label for="mini-3"><img src="https://picsum.photos/id/227/200/300"></label>
  <div class="image">
    <div><img src="https://picsum.photos/id/237/200/300"></div>
    <div><img src="https://picsum.photos/id/247/200/300"></div>
    <div><img src="https://picsum.photos/id/227/200/300"></div>
  </div>
</div>

Вариант с миниатюрами снизу:

.wrapper {
  position: relative;
  width: 200px;
  height: 270px;
  padding: 10px;
  border: 1px solid;
}

.wrapper>input {
  display: none;
}

.wrapper label {
  float: left;
  display: block;
}

.image {
  clear: both;
  position: relative;
  top: -286px;
  left: -12px;
}

.image>div {
  position: absolute;
  opacity: 0;
  top: 10px;
  left: 10px;
}

#mini-1:checked~.image>div:nth-child(1),
#mini-2:checked~.image>div:nth-child(2),
#mini-3:checked~.image>div:nth-child(3) {
  opacity: 1;
}

.image img {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid;
}

.wrapper label img {
  width: 50px;
  height: 50px;
  margin: 210px 7px 0 7px;
  border: 1px solid;
}
<div class="wrapper">
  <input type="radio" name="image" id="mini-1" checked />
  <label for="mini-1"><img src="https://picsum.photos/id/237/200/300"></label>
  <input type="radio" name="image" id="mini-2" />
  <label for="mini-2"><img src="https://picsum.photos/id/247/200/300"></label>
  <input type="radio" name="image" id="mini-3" />
  <label for="mini-3"><img src="https://picsum.photos/id/227/200/300"></label>
  <div class="image">
    <div><img src="https://picsum.photos/id/237/200/300"></div>
    <div><img src="https://picsum.photos/id/247/200/300"></div>
    <div><img src="https://picsum.photos/id/227/200/300"></div>
  </div>
</div>

Вариант с миниатюрами слева:

.wrapper {
  position: relative;
  width: 270px;
  height: 200px;
  padding: 10px;
  border: 1px solid;
}

.wrapper>input {
  display: none;
}

.wrapper label {
  display: block;
}

.image {
  clear: both;
  position: relative;
}

.image>div {
  position: absolute;
  opacity: 0;
  top: -215px;
  right: 2px;
}

#mini-1:checked~.image>div:nth-child(1),
#mini-2:checked~.image>div:nth-child(2),
#mini-3:checked~.image>div:nth-child(3) {
  opacity: 1;
}

.image img {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid;
}

.wrapper label img {
  width: 50px;
  height: 50px;
  margin: 6px 0;
  border: 1px solid;
}
<div class="wrapper">
  <input type="radio" name="image" id="mini-1" checked />
  <label for="mini-1"><img src="https://picsum.photos/id/237/200/300"></label>
  <input type="radio" name="image" id="mini-2" />
  <label for="mini-2"><img src="https://picsum.photos/id/247/200/300"></label>
  <input type="radio" name="image" id="mini-3" />
  <label for="mini-3"><img src="https://picsum.photos/id/227/200/300"></label>
  <div class="image">
    <div><img src="https://picsum.photos/id/237/200/300"></div>
    <div><img src="https://picsum.photos/id/247/200/300"></div>
    <div><img src="https://picsum.photos/id/227/200/300"></div>
  </div>
</div>

Вариант с миниатюрами справа:

.wrapper {
  position: relative;
  width: 270px;
  height: 200px;
  padding: 10px;
  border: 1px solid;
}

.wrapper>input {
  display: none;
}

.wrapper label {
  display: block;
  padding-left: 215px;
}

.image {
  clear: both;
  position: relative;
}

.image>div {
  position: absolute;
  opacity: 0;
  top: -215px;
  left: 0px;
}

#mini-1:checked~.image>div:nth-child(1),
#mini-2:checked~.image>div:nth-child(2),
#mini-3:checked~.image>div:nth-child(3) {
  opacity: 1;
}

.image img {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid;
}

.wrapper label img {
  width: 50px;
  height: 50px;
  margin: 6px 0;
  border: 1px solid;
}
<div class="wrapper">
  <input type="radio" name="image" id="mini-1" checked />
  <label for="mini-1"><img src="https://picsum.photos/id/237/200/300"></label>
  <input type="radio" name="image" id="mini-2" />
  <label for="mini-2"><img src="https://picsum.photos/id/247/200/300"></label>
  <input type="radio" name="image" id="mini-3" />
  <label for="mini-3"><img src="https://picsum.photos/id/227/200/300"></label>
  <div class="image">
    <div><img src="https://picsum.photos/id/237/200/300"></div>
    <div><img src="https://picsum.photos/id/247/200/300"></div>
    <div><img src="https://picsum.photos/id/227/200/300"></div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.