Django新手无JS基础如何用for循环实现lightbox图片画廊

问题排查 #

• 1. 模板for循环嵌套逻辑错误：你将整个lightbox模态框放在了图片遍历的for循环内部，会导致页面生成多个id为myModal的重复元素，JS通过ID获取元素时只会匹配到第一个，功能完全失效。模态框的公共框架（外层容器、关闭按钮、前后翻页控件、标题容器）全局只需要1个，仅需遍历生成缩略图、轮播图项、模态框内的缩略控制图三类内容即可。
• 2. JS存在语法错误：plusSlides函数末尾多了一个无关字符a，会导致JS运行直接报错。
• 3. 总图片计数错误：你在计数处写的{{ image.image.count }}是单个图片对象的属性调用，无法拿到总图片数，应该调用关联查询集的总长度{{ object.illustration_objet_archi.count }}。
• 4. 缺失alt属性：JS逻辑中会读取demo缩略图的alt属性作为标题展示，你没有给demo图片加alt属性，会导致标题显示异常。
• 5. 缩略图布局结构错误：每个缩略图都单独套了row容器，会导致所有缩略图纵向排列，不符合画廊的横向排列需求。

修复方案 #

1. 替换detail.html对应代码 #

<div id="illustrations" class="galerie">
  <!-- 缩略图区域 仅遍历生成缩略图 -->
  <div class="row">
    {% for image in object.illustration_objet_archi.all %}
    <div class="column">
      <img src="{{ image.image_thumbnail.url }}" onclick="openModal();currentSlide({{ forloop.counter }})" class="hover-shadow">
    </div>
    {% endfor %}
  </div>

  <!-- 模态框全局仅一个 -->
  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      <!-- 遍历生成轮播图项 -->
      {% for image in object.illustration_objet_archi.all %}
      <div class="mySlides">
        <div class="numbertext"> {{ forloop.counter }} / {{ object.illustration_objet_archi.count }} </div>
        <img src="{{ image.image.url }}" style="width:100%">
      </div>
      {% endfor %}

      <!-- 前后翻页控件 固定写一次即可 -->
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>

      <!-- 标题容器 固定写一次即可 -->
      <div class="caption-container">
        <p id="caption"></p>
      </div>

      <!-- 遍历生成模态框内的缩略控制图 -->
      <div class="row">
      {% for image in object.illustration_objet_archi.all %}
        <div class="column">
          <img class="demo" src="{{ image.image.url }}" alt="{{ image.legende }}" onclick="currentSlide({{ forloop.counter }})">
        </div>
      {% endfor %}
      </div>
    </div>
  </div>
</div>

2. 修复lightbox.js的语法错误 #

找到plusSlides函数，删掉末尾多余的a，修改后代码如下：

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

修改完成后刷新页面即可正常使用lightbox功能。

内容的提问来源于stack exchange，提问作者Mapper