How can I display the desired photo in a modal window?

Question

JavaScript

The user on his profile page has several photos that he previously posted.
I display photos on the page through a for loop

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

I want to make it so that when you click on a photo, a modal window opens with a photo, but with a higher resolution (like on Instagram). I took js and css sources from the Internet, but if you click on any photo, the 1st photo from the list will always be displayed in the modal window.

Answer 1

You need to add an id to the pictures, read it when clicked, find the desired picture in a loop and display it on the screen