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>

当我点击时，我希望href中的图像链接仅使用javascript no 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是一个轻量级的普通javascript灯箱，您可以将其用于此目的。

可以找到它的文档here

在灯箱中打开href图片链接

2 个答案: