在Lightbox中打开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在lightbox中打开。

有帮助吗？:)

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);
  })
})

现在，我们在单击时为每个图像/链接创建一个lightbox-element。

你应该用css设置样式，让它成为绝对的、居中的等等。

Answer 2

glightbox是一个轻量级的javascript lightbox，你可以使用它来实现这个目的。

相关文档可在here中找到