如何使 Panzoom 为模态窗口中的多个图像工作

问题描述

我一直在为一个在线画廊做一个项目，我们将使用模态窗口以更大的分辨率展示每个展览。我们还需要放大/缩小功能，因此我们使用了 timmywill 的 Panzoom。

在这个 code from codepen 中，每个红色按钮打开一个具有图像和缩放操作的模式窗口。到目前为止，代码仅适用于按钮/图像 1，我为每个按钮使用 querySelectorAll 获取 NodeLists，并使用 forEach 迭代以将 eventListener 添加到每个按钮。请注意，当我使用 const zoomArea = document.querySelectorAll(".zoom-area"); 时，所有按钮都不起作用。

据我所知，我需要 Panzoom 函数将缩放区域的节点列表作为参数，但我不确定如何做到这一点。您有什么建议吗？

请原谅 CSS 错误。

//When I use const zoomArea = document.querySelectorAll(".zoom-area"); nothing works.//
const zoomArea = document.querySelector(".zoom-area");
const panned = false;
const position = {};

// I think that Panzoom function has to accept zoomArea parameter as a NodelList to work properly.
const panzoom = Panzoom(zoomArea,{
  maxScale: 4
});

const zoomIn = document.querySelectorAll(".zoom-in");
const zoomOut = document.querySelectorAll(".zoom-out");
const zoomrange = document.querySelectorAll(".zoom-range");
const reset = document.querySelectorAll(".reset");

//Zoom actions,they only work properly for button/image 1 so far.//

document.querySelectorAll(".zoom-wrapper").forEach((item) => {
  item.addEventListener("wheel",panzoom.zoomWithWheel);
});

zoomIn.forEach((item) => {
  item.addEventListener("click",panzoom.zoomIn);
});

zoomOut.forEach((item) => {
  item.addEventListener("click",panzoom.zoomOut);
});

zoomrange.forEach((item) => {
  item.addEventListener("input",(event) => {
    panzoom.zoom(event.target.valueAsNumber);
  });
});

reset.forEach((item) => {
  item.addEventListener("click",panzoom.reset);
});

*,*:before,*:after {
  -webkit-Box-sizing: border-Box;
  -moz-Box-sizing: border-Box;
  Box-sizing: border-Box;
}

html {
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
}

input {
  display: none;
}

p {
  margin: 0;
}

.opn_mdl_btn {
  color: #fff;
  font-weight: bold;
  font-size: 1vw;
  line-height: 2vw;
  text-align: center;
  background-color: #d32f2f;
  display: inline-block;
  height: 2vw;
  width: 2vw;
  text-decoration: none;
  border-radius: 50%;
  cursor: pointer;
  animation: pulse 1.5s infinite;
}

.content {
  background: #fff;
  width: 30%;
  margin: 1rem auto;
  padding: 1em;
  text-align: center;
  display: none;
  border-radius: 8px;
}

img {
  max-width: auto;
  height: 88vh;
}

.zoom-buttons {
  position: relative;
  z-index: 1;
  background-color: #fff;
}

.zoom-range {
  display: inline;
}
.btn_container {
  text-align: right;
}

.close_modal_btn {
  font-size: 1.5em;
  padding: -0.5em;
  position: relative;
  z-index: 1;
}

.close_modal_btn::after {
  content: "\26cc";
}
.close_modal_btn:hover,.close_modal_btn:focus {
  cursor: pointer;
}

/* Rulesets for button positions */
#btn_1 {
  position: absolute;
  left: 13%;
  top: 22%;
}
#btn_2 {
  position: absolute;
  left: 25%;
  top: 55%;
}
#btn_3 {
  position: absolute;
  left: 40%;
  top: 50%;
}
#btn_4 {
  position: absolute;
  left: 80%;
  top: 50%;
}

#modal_1:checked ~ #content1,#modal_2:checked ~ #content2,#modal_3:checked ~ #content3,#modal_4:checked ~ #content4 {
  display: block;
  animation: fadein 0.5s;
}

/* Ruleset  for toggle visibility of button */
input:checked ~ label .opn_mdl_btn {
  display: none;
  animation: fadeout 0.5s;
}

.opn_mdl_btn:hover,.opn_mdl_btn:focus {
  color: #d32f2f;
  background: white;
}

<script src="https://timmywil.com/panzoom/demo/panzoom.js"></script>
<div class="container">
  <input type="checkBox" class="modal" id="modal_1" name="modals" />
  <input type="checkBox" class="modal" id="modal_2" name="modals" />
  <input type="checkBox" class="modal" id="modal_3" name="modals" />
  <input type="checkBox" class="modal" id="modal_4" name="modals" />
  <label for="modal_1">
    <div id="btn_1" class="opn_mdl_btn">1</div>
  </label>
  <label for="modal_2">
    <div id="btn_2" class="opn_mdl_btn">2</div>
  </label>
  <label for="modal_3">
    <div id="btn_3" class="opn_mdl_btn">3</div>
  </label>
  <label for="modal_4">
    <div id="btn_4" class="opn_mdl_btn">4</div>
  </label>
  <div id="content1" class="content zoom-wrapper">
    <div class="btn_container">
      <label for="modal_1" class="close_modal_btn"></label>
    </div>
    <p class="zoom-area img">
      <img src="https://picsum.photos/id/137/200/300" alt="random image" />
    </p>
    <section class="zoom-buttons">
      <button class="zoom-in">Zoom In</button>
      <button class="zoom-out">Zoom Out</button>
      <input type="range" class="zoom-range" min="0.4" max="5" step="0.05" />
      <button class="reset">Reset</button>
    </section>
  </div>
  <div id="content2" class="content zoom-wrapper">
    <div class="btn_container">
      <label for="modal_2" class="close_modal_btn"></label>
    </div>
    <p class="zoom-area">
      <img src="https://picsum.photos/id/337/200/300" alt="random image" />
    </p>
    <section class="zoom-buttons">
      <button class="zoom-in">Zoom In</button>
      <button class="zoom-out">Zoom Out</button>
      <input type="range" class="zoom-range" min="0.4" max="5" step="0.05" />
      <button class="reset">Reset</button>
    </section>
  </div>
  <div id="content3" class="content zoom-wrapper">
    <div class="btn_container">
      <label for="modal_3" class="close_modal_btn"></label>
    </div>
    <p class="zoom-area">
      <img src="https://picsum.photos/id/480/200/300" alt="random image" />
    </p>
    <section class="zoom-buttons">
      <button class="zoom-in">Zoom In</button>
      <button class="zoom-out">Zoom Out</button>
      <input type="range" class="zoom-range" min="0.4" max="5" step="0.05" />
      <button class="reset">Reset</button>
    </section>
  </div>
  <div id="content4" class="content zoom-wrapper">
    <div class="btn_container">
      <label for="modal_4" class="close_modal_btn"></label>
    </div>
    <p class="zoom-area">
      <img src="https://picsum.photos/id/30/200/300" alt="Banner4-est5" />
      <p />
    <section class="zoom-buttons">
      <button class="zoom-in">Zoom In</button>
      <button class="zoom-out">Zoom Out</button>
      <input type="range" class="zoom-range" min="0.4" max="5" step="0.05" />
      <button class="reset">Reset</button>
    </section>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）