在燈箱中打開 href 圖片鏈接

Question

這是我的實際結構

<a class="magnific-popup" href="images/traitements/trait8.webp">
    <img class="img-responsive image" src="images/traitements/8.webp" alt="traitement 8">
    <div class="middle">
        <div class="text">
            <img aria-hidden="true" src="images/plus.svg" class="plus-icon">
        </div>
    </div>
</a>

當我單擊 < a> 時，我希望 href 中的圖像鏈接僅使用 javascript 而不是 jquery 在燈箱中打開。

有什么幫助嗎？ :)

Answer 1

所以這是一個多步驟的過程。 您首先需要阻止瀏覽器的默認行為（不打開鏈接），然后您需要創建並插入您的 Lightbox-DOM-Elements（即 Img-tag）到您的頁面中，最后您必須對其進行樣式設置.

首先是js：

//Get all images with the class "magnific-popup"
 const allImagesWithLightbox = document.querySelectorAll("a.magnific-popup")

//Do the following for every found image:

Array.from(allImagesWithLightbox).forEach(image => {
let currentImageUrl= image.href;
  image.addEventListener("click", (event) => {
     event.preventDefault()
     let lightbox = document.createElement("div");
     let lightboxImage = document.createElement("img");
     lightboxImage.src = currentImageUrl;
     lightbox.classList.add("lightbox");
     lightbox.appendChild(lightboxImage);
     document.body.appendChild(lightbox);
  })
})

現在我們正在為每個圖像/鏈接創建一個燈箱元素。

您應該使用 css 設置樣式以使其絕對和居中等。

Answer 2

glightbox是一個輕量級的 vanilla javascript 燈箱，您可以將其用於此目的。

可以在這里找到它的文檔