mirror of
https://github.com/Kakune55/ComiPy.git
synced 2025-05-07 02:39:26 +08:00
104 lines
3.0 KiB
HTML
104 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>展示图片列表和封面</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
#gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
grid-gap: 20px;
|
|
}
|
|
|
|
.image {
|
|
max-width: 100%;
|
|
height: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.loading {
|
|
display: none;
|
|
}
|
|
|
|
#imageContainer {
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 9999;
|
|
max-height: 90%;
|
|
max-width: 90%;
|
|
}
|
|
|
|
#imageContainer img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="gallery"></div>
|
|
<div id="imageContainer"></div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
fetchImageList(); // 从API获取图片列表
|
|
|
|
// 从API获取图片列表
|
|
function fetchImageList() {
|
|
fetch('/api/info?func=bookname&page=1')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
displayImages(data);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching image list:', error);
|
|
});
|
|
}
|
|
|
|
// 显示图片列表
|
|
function displayImages(imageList) {
|
|
const gallery = document.getElementById('gallery');
|
|
gallery.innerHTML = '';
|
|
|
|
imageList.forEach(image => {
|
|
const imgUrl = `/api/img/${image[1]}/1`; // 构建获取封面的API URL
|
|
const img = document.createElement('img');
|
|
const span = document.createElement('span');
|
|
span.textContent = image[2]; // 书名作为标题
|
|
img.src = imgUrl;
|
|
img.classList.add('image');
|
|
img.dataset.linkId = image[1]; // 存储链接ID以便点击事件处理
|
|
|
|
// 添加点击事件处理程序
|
|
img.addEventListener('click', function () {
|
|
window.location.href = "/book/"+image[1];
|
|
});
|
|
|
|
const container = document.createElement('div');
|
|
container.classList.add('image-container'); // 添加一个容器类
|
|
container.appendChild(img); // 将 img 元素添加到容器中
|
|
container.appendChild(span); // 将 span 元素添加到容器中
|
|
|
|
gallery.appendChild(container); // 将容器添加到 gallery 中
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |