Загрузка нужной картинки.

[slavAAvals]

Добрый день.
Тема, думаю, очень простая, но я с ней сталкиваюсь впервые и прошу просветить.
Есть блок с галереей, скажем так 6 дивов, внутри которых ссылка > картинка. В дальнейшем это реализуется, как popup, и поэтому нужно при клике на, например, 1.jpg в скрытом диве, который появляется по событию клик "вываливалась" именно та картинка, на которую я нажал.
Подгружалась, скажем так.

[ksa]

slavAAvals, ты так много все написал... Но не сделал даже простенького тестового хтмл примера...

[slavAAvals]

https://github.com/Paqura/Mosremkom

[ksa]

slavAAvals, тут пример выкладывай, текстом...

[slavAAvals]

<div class="services__kap-show">
<div class="kap-show__header-wrapper">
<h2 class="kap-show__header">Выполненные проекты</h2>
</div>


<div class="kap-show__list">


<div class="kap-show__list-item">
<div class="kap-show__list-img">
<a href="#"><img src="" alt="" class="list-img__foto"></a>
<div class="kap-show__list-img--hiden" id="kap-show__list-img--show">
<a href="#"><img src="#" alt=""></a>
</div>
</div>
<div class="kap-show__list-text">
<ul class="list-text__items">
<li class="list-text__descr">Адрес: <span class="list-text__items--brown">пл.Заводская д.12</span></li>
<li class="list-text__descr">Помещение: <span class="list-text__items--brown">Прихожая</span></li>
<li class="list-text__descr">Дата: <span class="list-text__items--brown">22.01.2016</span></li>
</ul>
</div>
</div>

<div class="kap-show__list-item">
<div class="kap-show__list-img">
<a href="#"><img src="" alt="" class="list-img__foto"></a>
<div class="kap-show__list-img--hiden" id="kap-show__list-img--show">
<a href="#"><img src="#" alt=""></a>
</div>
</div>
<div class="kap-show__list-text">
<ul class="list-text__items">
<li class="list-text__descr">Адрес: <span class="list-text__items--brown">пл.Заводская д.12</span></li>
<li class="list-text__descr">Помещение: <span class="list-text__items--brown">Прихожая</span></li>
<li class="list-text__descr">Дата: <span class="list-text__items--brown">22.01.2016</span></li>
</ul>
</div>
</div>

<div class="kap-show__list-item">
<div class="kap-show__list-img">
<a href="#"><img src="" alt="" class="list-img__foto"></a>
<div class="kap-show__list-img--hiden" id="kap-show__list-img--show">
<a href="#"><img src="#" alt=""></a>
</div>
</div>
<div class="kap-show__list-text">
<ul class="list-text__items">
<li class="list-text__descr">Адрес: <span class="list-text__items--brown">пл.Заводская д.12</span></li>
<li class="list-text__descr">Помещение: <span class="list-text__items--brown">Прихожая</span></li>
<li class="list-text__descr">Дата: <span class="list-text__items--brown">22.01.2016</span></li>
</ul>
</div>
</div>

<div class="kap-show__list-item">
<div class="kap-show__list-img">
<a href="#"><img src="" alt="" class="list-img__foto"></a>
<div class="kap-show__list-img--hiden" id="kap-show__list-img--show">
<a href="#"><img src="#" alt=""></a>
</div>
</div>
<div class="kap-show__list-text">
<ul class="list-text__items">
<li class="list-text__descr">Адрес: <span class="list-text__items--brown">пл.Заводская д.12</span></li>
<li class="list-text__descr">Помещение: <span class="list-text__items--brown">Прихожая</span></li>
<li class="list-text__descr">Дата: <span class="list-text__items--brown">22.01.2016</span></li>
</ul>
</div>
</div>

<div class="kap-show__list-item">
<div class="kap-show__list-img">
<a href="#"><img src="" alt="" class="list-img__foto"></a>
<div class="kap-show__list-img--hiden" id="kap-show__list-img--show">
<a href="#"><img src="#" alt=""></a>
</div>
</div>
<div class="kap-show__list-text">
<ul class="list-text__items">
<li class="list-text__descr">Адрес: <span class="list-text__items--brown">пл.Заводская д.12</span></li>
<li class="list-text__descr">Помещение: <span class="list-text__items--brown">Прихожая</span></li>
<li class="list-text__descr">Дата: <span class="list-text__items--brown">22.01.2016</span></li>
</ul>
</div>
</div>

<div class="kap-show__list-item">
<div class="kap-show__list-img">
<a class="kap-show__link-img" href="#"><img src="" alt="" class="list-img__foto"></a>
<div class="kap-show__list-img--hiden" id="kap-show__list-img--show">
<a href="#"><img src="#" alt=""></a>
</div>
</div>

<div class="kap-show__list-text">
<ul class="list-text__items">
<li class="list-text__descr">Адрес: <span class="list-text__items--brown">пл.Заводская д.12</span></li>
<li class="list-text__descr">Помещение: <span class="list-text__items--brown">Прихожая</span></li>
<li class="list-text__descr">Дата: <span class="list-text__items--brown">22.01.2016</span></li>
</ul>
</div>
</div>

</div>

<div class="kap-show__review">

</div>

</div>



</main>

<div class="kap-show__hidden-gallery kap-show__gallery">
<div class="kap-show__gallery-list">
<img class="gallery-item" src="https://pp.vk.me/c625529/v625529317/53894/F609Dsy-j6c.jpg" style="margin: 0 auto" alt="foto">
<div class="gallery-list__review-block">
<h4 class="review-block__name">Валентина Фёдоровна Копчикова</h4>
<img src="http://fas.gov.ru/upload/structure/IMG_4633.JPG" alt="foto" class="review-block__foto">
<p class="review-block__text">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Свой щеке, текст они, правилами рекламных обеспечивает силуэт заглавных. Которой всеми, наш взобравшись взгляд океана, свою агентство вопроса переписали ручеек большой букв продолжил. Текстами продолжил, строчка путь всемогущая имеет это.</p>
</div>
<a class="gallery-item__close" href="#"> ✖ </a>
</div>
</div>

[slavAAvals]

Идея в чём. В самом низу
kap-show__gallery
который и есть блок, по которому я кликаю и всплывает окошко - попап.
я хочу, чтобы при клике на любой из
kap-show__link-img

выводило изображение именно то, по которому я кликаю.
т.е. в скрытом блоке надо как-то подкрутить js код, чтобы он фильтровал и выводил нужный файлик.

[slavAAvals]

Первый слайд - галерея. Второй - попап.

[slavAAvals]

Я понимаю, что :
1. Нужно организовать массив из картинок.
2. Динамично подгружать нужную.
Что я не понимаю:

Как).

Возможно нужно собрать их, используя document.getElementsByClassName и через [].forEach каким-то образом протаскивать всю эту систему...

[ksa]

slavAAvals, пока у нас явное непонимание про тестовый пример...

1. Нужно организовать массив из картинок.
2. Динамично подгружать нужную.

Не обязательно делать именно массив... Можно хранить информацию о картинке в data-атрибутах ключевых элементов...

[рони]

slavAAvals,
https://learn.javascript.ru/task/image-gallery