Создание галереи изображений с вкладками - меняет мои карты flexbox - PullRequest
Новая
       20

Создание галереи изображений с вкладками - меняет мои карты flexbox

0 голосов
/ 26 февраля 2019

Я использую галерею изображений с вкладками W3C для страницы на веб-сайте.Он работает нормально, за исключением того, что он переформатирует другие страницы, где я использовал галерею карточек flexbox.Изображения на карточках искажаются, а сами карточки становятся тоньше.

Другая проблема, на которую я хотел бы помочь, - это центрирование увеличенного изображения и уменьшение размера изображений.

< script >
  function myFunction(imgs) {
    var expandImg = document.getElementById("expandedImg");
    var imgText = document.getElementById("imgtext");
    expandImg.src = imgs.src;
    imgText.innerHTML = imgs.alt;
    expandImg.parentElement.style.display = "block";
  } <
  /script>
/*styling for gallery page images*/

* {
  box-sizing: border-box;
}


/*The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/*Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container-gallerypage {
  position: relative;
  display: none;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 20px;
  color: white;
  font-size: 20px;
  text-align: center;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
<div class="row">
  <div class="column">
    <img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). 
    " style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer,  circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div class="container-gallerypage">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:80%">
  <div id="imgtext" style="text-align: center;width:75%;"></div>
</div>

Я разместил HTML-код для страницы галереи и все мои CSS на CodePen.https://codepen.io/Ovimel/pen/YgzVeg

Здесь находится страница W3C, которую я пытаюсь воспроизвести - https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp

Примечание: я начинающий программист раз в несколько лет, и, как вы можете видеть из CSSЯ собираю код в Интернете для создания этой страницы, поэтому я не совсем понимаю, где и как элементы влияют друг на друга.Было бы полезно, если бы вы объяснили достаточно просто.И я не уверен, что даже опубликовал то, что вам нужно, чтобы помочь мне.ТИА

1 Ответ

0 голосов
/ 26 февраля 2019

В коде примера они использовали изображения с одинаковой шириной и высотой, поэтому не будет никаких разрывов дизайна.Но в вашем случае вы использовали изображения с размерами, которые нарушают дизайн.

Можете ли вы попробовать этот код и проверить, решает ли это вашу проблему.

.column {
float: left;
width: 25%;
padding: 10px;
height: 200px;
overflow: hidden;
}
.column img {
opacity: 0.8;
cursor: pointer;
max-width: 100%;
}
.container-gallerypage {
position: relative;
display: none;
text-align: center;
}
...