×
‹
![大图预览]()
›
// ========== 文件夹与分类对应配置（不要修改） ==========
const categoryConfig = [
{
id: "changzhao",
folder: "img/changzhao/",
gridEl: document.getElementById("grid-changzhao")
},
{
id: "zhengpian",
folder: "img/zhengpian/",
gridEl: document.getElementById("grid-zhengpian")
},
{
id: "richang",
folder: "img/richang/",
gridEl: document.getElementById("grid-richang")
}
];
// 支持的图片格式
const imgSuffix = ["jpg", "jpeg", "png", "webp"];
// 灯箱全局变量
let currentImages = [];
let currentIndex = 0;
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightboxImg');
const lightboxClose = document.getElementById('lightboxClose');
const lightboxPrev = document.getElementById('lightboxPrev');
const lightboxNext = document.getElementById('lightboxNext');
// ========== 新增：读取图片配套txt信息 ==========
async function getImageCustomInfo(fileName, folderPath) {
// 去掉图片后缀，获取基础文件名
const baseName = fileName.replace(/\.(jpg|jpeg|png|webp)$/, "");
const txtUrl = `${folderPath}${baseName}.txt`;
try {
const res = await fetch(txtUrl);
if (!res.ok) return null;
const txtContent = await res.text();
const lineList = txtContent.trim().split("\n");
return {
title: lineList[0] || "摄影作品",
desc: lineList[1] || "自动加载图片",
model: lineList[2] || "无出镜标注"
};
} catch (err) {
// 无txt文件时返回null，使用默认文字
return null;
}
}
// ========== 自动读取文件夹图片渲染卡片 ==========
async function loadAllCategoryImages() {
for (let item of categoryConfig) {
const grid = item.gridEl;
grid.innerHTML = `加载中...
`;
try {
// 请求文件夹目录列表
const res = await fetch(item.folder);
const htmlText = await res.text();
// 匹配所有图片文件
const matchReg = new RegExp(`href="([^"]+\\.(${imgSuffix.join('|')}))`, "gi");
const fileMatches = htmlText.match(matchReg);
// 无图片显示空提示
if (!fileMatches || fileMatches.length === 0) {
grid.innerHTML = `${item.id === 'changzhao' ? '场照' : item.id === 'zhengpian' ? '正片' : '日常'}作品待上传
`;
continue;
}
// 清空加载提示，生成卡片
grid.innerHTML = "";
for (let hrefStr of fileMatches) {
const fileName = hrefStr.replace(/href="/, "");
const imgSrc = item.folder + fileName;
// 读取配套txt自定义信息
const customInfo = await getImageCustomInfo(fileName, item.folder);
// 赋值文字，无txt则用默认
const title = customInfo?.title || "摄影作品";
const desc = customInfo?.desc || "自动加载图片";
const modelText = customInfo?.model || `分类：${item.id === 'changzhao' ? '场照' : item.id === 'zhengpian' ? '正片' : '日常'}`;
const tagText = item.id === 'changzhao' ? '场照' : item.id === 'zhengpian' ? '正片' : '日常';
// 生成作品卡片
const card = document.createElement("div");
card.className = "work-card";
card.innerHTML = `
${title}
${desc}
${modelText}
#${tagText}
`;
grid.appendChild(card);
}
} catch (err) {
grid.innerHTML = `读取图片失败，请检查文件夹/80端口
`;
console.error(`分类${item.id}加载失败：`, err);
}
}
// 图片加载完成后绑定灯箱点击事件
bindImageEvents();
}
// ========== 分类切换功能 ==========
const btns = document.querySelectorAll('.category-btn');
const panels = document.querySelectorAll('.category-panel');
btns.forEach(btn => {
btn.addEventListener('click', () => {
btns.forEach(b => b.classList.remove('active'));
panels.forEach(p => p.classList.remove('active'));
btn.classList.add('active');
const target = btn.getAttribute('data-target');
document.getElementById(target).classList.add('active');
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
// ========== 图片灯箱 + 左右翻页功能 ==========
function bindImageEvents() {
document.querySelectorAll('.work-img img').forEach(img => {
img.addEventListener('click', (e) => {
e.stopPropagation();
// 获取当前分类所有图片
const panel = img.closest('.category-panel');
currentImages = Array.from(panel.querySelectorAll('.work-img img'));
currentIndex = currentImages.indexOf(img);
showCurrentImage();
lightbox.classList.add('active');
document.body.style.overflow = 'hidden';
});
});
}
// 显示当前索引大图
function showCurrentImage() {
const img = currentImages[currentIndex];
lightboxImg.src = img.src;
}
// 上一张
function prevImage() {
currentIndex = (currentIndex - 1 + currentImages.length) % currentImages.length;
showCurrentImage();
}
// 下一张
function nextImage() {
currentIndex = (currentIndex + 1) % currentImages.length;
showCurrentImage();
}
// 关闭灯箱
function closeLightbox() {
lightbox.classList.remove('active');
document.body.style.overflow = '';
}
// 灯箱事件绑定
lightbox.addEventListener('click', closeLightbox);
lightboxClose.addEventListener('click', (e) => {
e.stopPropagation();
closeLightbox();
});
lightboxPrev.addEventListener('click', (e) => {
e.stopPropagation();
prevImage();
});
lightboxNext.addEventListener('click', (e) => {
e.stopPropagation();
nextImage();
});
// 键盘快捷键
document.addEventListener('keydown', (e) => {
if (!lightbox.classList.contains('active')) return;
if (e.key === 'Escape') closeLightbox();
if (e.key === 'ArrowLeft') prevImage();
if (e.key === 'ArrowRight') nextImage();
});
// 页面载入自动加载所有图片
window.onload = loadAllCategoryImages;