如何使用 django 创建基于 for 循环的灯箱库

Posted 2023-02-24

【中文标题】如何使用 django 创建基于 for 循环的灯箱库

【英文标题】：How to create a for loop based lightbox gallery with django

【发布时间】：2022-01-11 21:03:11

【问题描述】：

（这里是 Django 开发新手，没有 javascript 知识）

我正在构建一个 Django 网站，旨在为数据库中的每个 通知 显示一个页面。 一些图片可以附在通知上：有时没有，有时几张，最多十几张。

我想在 detail.html 页面的顶部显示这些图像，如下所示： https://www.w3schools.com/howto/howto_js_lightbox.asp

我知道我需要修改代码以使用 for 循环。我尽了最大努力去适应它，但我被一个无法正常工作的画廊困住了。

这是我现在的代码，改编自教程：

detail.html:

<div id="illustrations" class="galerie">

  % for image in object.illustration_objet_archi.all %

  <div class="row">

    <div class="column">

      <img src=" image.image_thumbnail.url " onclick="openModal();currentSlide( forloop.counter )" class="hover-shadow">

    </div>

  </div>

  <!-- The Modal/Lightbox -->
  <div id="myModal" class="modal">

    <span class="close cursor" onclick="closeModal()">&times;</span>
    
    <div class="modal-content">

      <div class="mySlides">
        <div class="numbertext">  forloop.counter  /  image.image.count  </div>
        <img src=" image.image.url " style="width:100%">
      </div>

      <!-- Next/previous controls -->
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>

      <!-- Caption text -->
      <div class="caption-container">
        <p id="caption"> image.legende </p>
      </div>

      <!-- Thumbnail image controls -->
      <div class="column">
        <img class="demo" src=" image.image.url " onclick="currentSlide( forloop.counter )">
      </div>

    </div>

  </div>

  % endfor %

</div>

style.css（body 指的是图库后面的文本区域）：

body 
  font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
  color: #333;
  font-weight: 300;


.galerie 
  width: 80%;


.row > .column 
  padding: 0 8px;


.row:after 
  content: "";
  display: table;
  clear: both;


/* Create four equal columns that floats next to eachother */
.column 
  float: left;
  width: 20%;


/* The Modal (background) */
.modal 
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;


/* Modal Content */
.modal-content 
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 80%;
  max-width: 900px;


/* The Close Button */
.close 
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;


.close:hover,
.close:focus 
  color: #999;
  text-decoration: none;
  cursor: pointer;


/* Hide the slides by default */
.mySlides 
  display: none;


/* Next & previous buttons */
.prev,
.next 
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;


/* Position the "next button" to the right */
.next 
  right: 0;
  border-radius: 3px 0 0 3px;


/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover 
  background-color: rgba(0, 0, 0, 0.8);


/* Number text (1/3 etc) */
.numbertext 
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;


/* Caption text */
.caption-container 
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;


img.demo 
  opacity: 0.6;


.active,
.demo:hover 
  opacity: 1;


img.hover-shadow 
  transition: 0.3s;


.hover-shadow:hover 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

lightbox.js：

// Open the Modal
function openModal() 
  document.getElementById("myModal").style.display = "block";


// Close the Modal
function closeModal() 
  document.getElementById("myModal").style.display = "none";


var slideIndex = 1;
showSlides(slideIndex);

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


// Thumbnail image controls
function currentSlide(n) 
  showSlides(slideIndex = n);


function showSlides(n) 
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) slideIndex = 1
  if (n < 1) slideIndex = slides.length
  for (i = 0; i < slides.length; i++) 
    slides[i].style.display = "none";
  
  for (i = 0; i < dots.length; i++) 
    dots[i].className = dots[i].className.replace(" active", "");
  
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;

【参考方案1】：

您的循环在错误的 div 中。您只需要循环中的图像，因此仅在需要动态图像的 img 标签之外使用循环。您可以尝试用以下代码替换您的 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>

<!-- The Modal/Lightbox -->
<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  /  image.image.count  </div>
    <img src=" image.image.url " style="width:100%">
  </div>
% endfor %

  <!-- Next/previous controls -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

  <!-- Caption text -->
  <div class="caption-container">
    <p id="caption"> image.legende </p>
  </div>

  <!-- Thumbnail image controls -->
% for image in object.illustration_objet_archi.all %
  <div class="column">
    <img class="demo" src=" image.image.url " onclick="currentSlide( forloop.counter )">
  </div>
% endfor %

</div>

【讨论】：

感谢 Prabin，现在确实好多了！循环有效。但是仍然存在一些显示故障：行中的缩略图图像没有按应有的宽度调整它们的宽度，当窗口宽度减小时它们会重叠。此外，当模态窗口打开时，焦点图像下方会出现一大堆图像。它可能与javascript有关吗？我没有修改原来的那个。也许我需要以一种或另一种方式让它知道循环？

嗨 Jeremy，问题不是因为 JS。您需要在 html 本身中进行一些更改，在所有 img 标签中添加 style="width:100%"，最后 还为 img 标签添加 alt 并在末尾删除 a JS plusSlides 函数中的分号。