图库中的图像应该以模式打开，但是下载它并且不知道为什么。
以下是要遵循的标准： - 脚本和basicLightbox模态窗口库样式的组合。使用 jsdelivr CDN 并将缩小 (.min) 库文件的链接添加到您的项目中。 - 单击图库项目后打开模式窗口。为此，请参阅文档和示例。 - 在打开模式窗口之前更改元素 src 属性的值。将现成的模态窗口标签与 basicLightbox 库示例中的图像一起使用。
这是 GitHub 页面： https://bazky.github.io/goit-js-hw-07/01-gallery.html
这是 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Image gallery</title>
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/styles.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/basicLightbox.min.css"
/>
</head>
<body>
<p><a href="index.html">Go back</a></p>
<div id="prev">
<div class="gallery">
<div class="gallery__item">
<a
class="gallery__link"
href="https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820_1280.jpg"
>
<img
width="340"
class="gallery__image"
src="https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820__480.jpg"
data-source="https://cdn.pixabay.com/photo/2019/05/14/16/43/rchids-4202820_1280.jpg"
alt="Hokkaido Flower"
/>
</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/basicLightbox.min.js"></script>
<script src="js/01-gallery.js" type="module"></script>
</body>
</html>
这是JS：
import { galleryItems } from "./gallery-items.js";
import * as basicLightbox from "basiclightbox";
const gallery = document.querySelector(".gallery");
function createGalleryItem(item) {
const galleryItem = document.querySelector(".gallery__item");
const image = galleryItem.querySelector(".gallery__image");
const link = galleryItem.querySelector(".gallery__link");
image.src = item.preview;
image.dataset.source = item.original;
image.alt = item.description;
link.href = item.original;
return galleryItem;
}
function renderGalleryItems() {
const galleryItemsElements = galleryItems.map(createGalleryItem);
}
function onGalleryItemClick(event) {
const imageSrc = event.target.dataset.source;
const instance = basicLightbox.create(`
<img src="${imageSrc}" width="800" height="600">
`);
instance.show();
}
function addGalleryItemsListener() {
gallery.addEventListener("click", (event) => {
if (event.target.classList.contains("gallery__image")) {
onGalleryItemClick(event);
}
});
}
const prev = document.getElementById("prev");
prev.addEventListener("click", (e) => {
preventDeafult();
});
renderGalleryItems();
addGalleryItemsListener();
onGalleryItemClick();
createGalleryItem();
console.log(galleryItems);
您尝试使用这两种方法：
首先需要安装 basiclightbox 包，之后您可以在 JS 脚本中使用导入，例如
需要从 JS 文件中删除导入 (import * as basicLightbox from "basiclightbox";)。 导入样式css和js的html文件就足够了。意思是CDN（内容分发网络）