带有多张图片的Django Modal答案

【问题标题】：Django Modal with multiple pictures带有多张图片的Django Modal
【发布时间】：2019-06-26 11:47:54
【问题描述】：

我只是想让 Django 在模式弹出窗口中显示图像。我的问题是，如果使用多张图像，则只有第一张图像显示在模式弹出窗口中。在用作按钮的缩小图像中，显示正确的图像。因此我不明白这里有什么问题。它应该是什么样子？

    {% 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 %}

【问题讨论】：

标签： django django-templates bootstrap-4 bootstrap-modal

【解决方案1】：

您正在循环中创建具有相同 ID 属性的多个元素，这意味着所有缩略图都链接到相同的模式。用 Django 的内置循环计数器区分 ID：

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

将输出#myModal1、myModal2等Django docs

【讨论】：