Джанго Модал с несколькими картинками - PullRequest
Новая
       8

Джанго Модал с несколькими картинками

0 голосов
/ 02 февраля 2019

Я просто пытаюсь заставить 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 %}

1 Ответ

0 голосов
/ 02 февраля 2019

Вы создаете несколько элементов с одинаковым атрибутом ID в цикле, что означает, что все эскизы ссылаются на один и тот же модал.Различайте идентификаторы с помощью встроенного счетчика циклов Django: 

<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

...