有沒有辦法為多個圖像添加一個單一的燈箱模態？

Question

我有多個圖像，我正在嘗試為其制作全屏燈箱模式。 我曾嘗試尋找燈箱模態，但它們通常都使用 jQuery 和/或舊版本的 Bootstrap。

目前我已經嘗試過這個：

HTML：

          <div id="howItWorksSteps">
        <p>2) Customer select items to be included in quote.</p>
        <!-- 1 photo goes here -->
        <img class="myImg" src="images/MarketplaceSolution_3.jpeg" alt="" style="width:100%;max-width:300px"
        data-bs-target="#myModal">
        <p>3) Customer selects shipping options.</p>
        <!-- 1 photo goes here -->
        <img class="myImg" src="images/MarketplaceSolution_4.jpeg" alt="" style="width:100%;max-width:300px"
        data-bs-target="#myModal">
        <p>4) Customer requests a quote.</p>
        <!-- 1 photo goes here -->
        <img class="myImg" src="images/MarketplaceSolution_5.jpeg" alt="" style="width:100%;max-width:300px"
        data-bs-target="#myModal">
        <p>5) Seller responds to quote with confirmed prices and shipping costs of order.</p>
        <!-- 1 photo goes here -->
        <img class="myImg" src="images/MarketplaceSolution_6.jpeg" alt="" style="width:100%;max-width:300px"
        data-bs-target="#myModal">
        <p>6a) Customer pays for order.</p>
        <img class="myImg" src="images/MarketplaceSolution_7.jpeg" alt="" style="width:100%;max-width:300px"
        data-bs-target="#myModal">
        <p>6b) Seller updates order as paid.</p>
        <!-- 1 photo goes here -->
        <img class="myImg" src="images/MarketplaceSolution_8.jpeg" alt="" style="width:100%;max-width:300px;"
        data-bs-target="#myModal">
        <p>7) Seller updates customer with shipping details including tracking numbers.</p>
        <!-- 1 photo goes here -->
        <img class="myImg" src="images/MarketplaceSolution_9.jpeg" alt="" style="width:100%;max-width:300px"
          data-bs-target="#myModal">


        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="multipleModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              <div class="modal-body">
                <div class="container-fluid p-0">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

Javascript：

const divHowItWorks = document.getElementById("howItWorksSteps");
const howItWorksImgs = divHowItWorks.querySelectorAll("img");
howItWorksImgs.click(function() {
  const imageSrc = $(this).data('src');
});

const myModal = document.getElementById("myModal");
const currentImg = document.getElementById("image");
currentImg.attr('src', '');

Answer 1

使用lightbox.js這讓生活變得非常輕松。 data-lightbox="photos"是您 HTML 中的重要部分。

您還需要獲取lightbox.js文件和lightbox.css文件。 這些都可以在CDN上獲得。

<div class="thumbnailContainer">

  <a href="pic01.jpg" data-lightbox="photos"> <!-- Full photo -->
    <img class="img-fluid" src="pic01small.jpg"> <!-- Thumbnail / Small Clicker -->
  </a>

  <!-- Copy aditional pics here then place this entire Div inside your modal -->

</div>