Django Modal with multiple pictures - django

Question

i'm just trying to make Django display images in modal popup. My problem is, if several images are used, that only the first image is displayed in the modal popup. In the scaled down images that are used as a button, the correct images are displayed. Therefore I do not understand what is wrong here. What should it look like?
{% block content %}
{% if object.image_count %}
<div class="row">
<div class="col-lg-12">
{% for img in object.image_set.all %}
{% thumbnail img.file "150x150" crop="center" as im %}
<!--a href='{{ img.file.url }}' data-lightbox="lightbox[{{ object.id }}]"
title="{{ object.title }}">
<img itemprop="image" src='{{ im.url }}' alt='{{ object.title }}' title='{{ object.title }}'
width="{{ im.width }}" height="{{ im.height }}" class="img-rounded"/>
</a-->
<!-- image trigger modal -->
<a data-toggle="modal" data-target="#myModal">
<img src="{{ im.url }}">
</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">{{ object.title }}</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<img itemprop="image" src='{{ img.file.url }}' class="img-rounded" style="width:100%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endthumbnail %}
{% endfor %}
</div>
</div>
{% endif %}
{% endblock %}

Answer 1

You're creating multiple elements with the same ID attribute in a loop, which means that all thumbnails link to the same modal. Differentiate the IDs with Django's built in loop counter:
<a data-toggle="modal" data-target="#myModal{{ forloop.counter }}">
...
<div class="modal fade" id="myModal{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
will output #myModal1, myModal2 etc. Django docs