Как мне получить изображение, по которому щелкнули в моей галерее вкладок, чтобы открыть правильный контейнер отображени ⇐ Html

[Anonymous]

Когда я нажимаю на изображение в галерее вкладок, изображение открывается в контейнере, созданном только для одного из контейнеров лет в моей галерее. Допустим, изображение находится в галерее 2020 года. При нажатии на него появляется большое окно отображения, предназначенное для демонстрации, так сказать, «изображения героя» из галереи 2018 года, вместо соответствующего окна отображения 2020 года. Почему это происходит и как решить проблему?

Код: Выделить всё

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";
}

Код: Выделить всё

CSS

body,
html {
height: 100%;
width: 100%;
min-width: 768px;
min-height: 600px;
background-color: #171717;
font-family: avenirprolight;
}

body {
overflow-y: scroll;
}

#content {
height: calc(100% - 90px);
}

.work {
position: relative;
width: 100%;
overflow: hidden;
top: 90px;
}

.work-images {
position: relative;
top: 0;
width: 100%;
max-width: 1200px;
margin: 60px auto 160px;
}

.container ul {
margin: 0;
margin-top: 100px;
list-style: none;
position: relative;
padding: 1px 100px;
color: #fff;
}

.container ul:before {
content: "";
width: 1px;
height: 100%;
position: absolute;
border-left: 1px dashed #3a3a3a;
}

.container ul li {
position: relative;
margin-left: 30px;
width: auto;
}

.container ul li:not(:first-child) {
margin-top: 30px;
}

.container ul li > span {
width: 1px;
height: 100%;
background: #ffffff;
left: -30px;
top: 0;
position: absolute;
}

.container ul li > span:before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid #fff;
position: absolute;
background: #ddc192;
left: -5px;
top: 0;
}

.container ul li span:after {
top: 100%;
}

number {
height: 100%;
}

.number span {
position: absolute;
font-size: 20px;
left: -95px;
font-weight: bold;
letter-spacing: 0.52em;
}

.number span:first-child {
top: 100;
}

.work-images {
position: relative;
top: 0;
width: 100%;
max-width: 1200px;
margin: 60px auto 160px;
}

.row,
.column,
.column img {
box-sizing: border-box;
}

.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}

.column {
flex: 20%;
max-width: 20%;
padding: 0 4px;
}

.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
opacity: 0.8;
cursor: pointer;
}

.column img:hover {
opacity: 1;
}

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

/* The expanding image container */
.expandedcontainer {
position: relative;
display: none;
padding: 0 4px;
margin: 8px 0 0;
}

/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}

Код: Выделить всё

HTML

1.  List item







 gallery test

[*]








  < b r   / >                 & l t ; u l & g t ; < b r   / >                     & l t ; l i & g t ; < b r   / >                         & l t ; d i v   c l a s s = " w o r k - i m a g e s " & g t ; < b r   / >                             & l t ; d i v   c l a s s = " r o w " & g t ; < b r   / >                                 & l t ; d i v   c l a s s = " c o l u m n " & g t ; < b r   / >                                     & l t ; i m g   s r c = " i m g _ n a t u r e . j p g "   a l t = " N a t u r e "   s t y l e = " w i d t h : 1 0 0 % "   onclick="myFunction(this);">

[img]img_snow.jpg[/img]

[img]img_mountains.jpg[/img]

[img]img_lights.jpg[/img]

[img]img_nature.jpg[/img]



×
[img]img_nature.jpg[/img]

[img]img_snow.jpg[/img]

[img]img_mountains.jpg[/img]

[img]img_lights.jpg[/img]

[img]img_nature.jpg[/img]



×
[img]img_nature.jpg[/img]

[img]img_snow.jpg[/img]

[img]img_mountains.jpg[/img]

[img]img_lights.jpg[/img]

[img]img_nature.jpg[/img]



×





2020

Подробнее здесь: https://stackoverflow.com/questions/798 ... isplay-con