Как можно отобразить нужное фото в модальном окне?

Question

[joli]

У пользователя на странице его профиля есть несколько фоток которые он ранее запостил.
Фотографии вывожу на странице через цикл for

{% for photo in photos %}
    <div class="eLAPa">
         <img src="{{ photo.photo.url }}">
    </div>
 {% endfor %}

Я хочу сделать так, чтобы при клике на фото открывалось модальное окно с фотографией, но с бОльшим разрешением(как в инстаграме). Брал из инета исходники js и css, но если кликнуть на любое фото то всегда в модальном окне будет отображаться 1-е из списка фото.

Comments

[Сергей Горностаев]

Как передать значение переменной (id) в модальное окно в thymeleaf?

Ответ справедлив и для Django.

Answer 1

[StepanSnigur]

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

Comments

[joli]

А id можно получить такой строкойdocument.getElementById({{ photo }});
Я просто js вообще не знаю

[StepanSnigur]

Нет, так получить id не получится. Если вы хотите хранить id в html, то его можно засунуть в data-атрибут. Выглядеть это будет так:
<img data-id="1" scr="your_sourse" class="image">
Чтобы получить это id:

let imageId = document.querySelector('.image').getAttribute('data-id');

[joli]

StepanSnigur,
В консоли выводит id только первой картинки

{% for photo in photos %}
        <div class="eLAPa">
            <span onclick="openWin();"><img class="image" data-id="{{ photo.id }}" src="{{ photo.photo.url }}"></span>        
          </div>
{% endfor %}

function openWin() {
        overflow.className = "overflow";
        document.body.appendChild(overflow);
        var height = modal.offsetHeight;
        modal.style.marginTop = - height / 2 + "px";
        modal.style.top = "50%";
        let imageId = document.querySelector('.image').getAttribute('data-id');
        console.log(imageId);
}

[StepanSnigur]

Попробуйте querySelectorAll

[joli]

StepanSnigur, Неа(

[StepanSnigur]

joli, В общем вот ссылка на codepen: https://codepen.io/StepanSnigur/pen/GaZdpG
В html вставьте свои значения

[StepanSnigur]

+ скрипт немного подредактируйте, я его писал на скорую руку.