91 lines
3.8 KiB
HTML
91 lines
3.8 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>
|
||
<link rel="stylesheet" href="/assets/css/font-awesome.css">
|
||
<link rel="stylesheet" href="/assets/css/style.css">
|
||
<link rel="stylesheet" href="/assets/css/album.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<a href="/" class="back-link">
|
||
<i class="fas fa-arrow-left"></i> 返回首页
|
||
</a>
|
||
<h1 class="album-title" id="album-title">加载中...</h1>
|
||
<div class="album-header-row">
|
||
<div class="album-info" id="album-info">
|
||
正在加载...
|
||
</div>
|
||
<div class="album-meta-tags" id="album-meta-tags"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="images-grid" id="images-container">
|
||
<div class="loading">
|
||
<i class="fas fa-spinner fa-spin"></i><br>加载图片中...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片查看器 - 使用previewModal相同逻辑 -->
|
||
<div class="preview-modal" id="lightbox">
|
||
<div class="preview-overlay" onclick="closeLightbox()"></div>
|
||
<div class="preview-container">
|
||
<div class="preview-header">
|
||
<div class="preview-title">
|
||
<h3 id="lightbox-title">图片标题</h3>
|
||
<span class="preview-info" id="lightbox-album">来自: 相册名称</span>
|
||
</div>
|
||
<div class="preview-actions">
|
||
<button class="preview-close" onclick="closeLightbox()">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="preview-content">
|
||
<div class="preview-image-container">
|
||
<img id="lightbox-img" src="" alt="" class="preview-image" loading="eager">
|
||
<div class="preview-loading">
|
||
<i class="fas fa-spinner fa-spin"></i>
|
||
<span>加载中...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="preview-footer">
|
||
<div class="preview-meta">
|
||
<span class="meta-item" id="lightbox-dimensions">
|
||
<i class="fas fa-ruler-combined"></i>
|
||
0 × 0
|
||
</span>
|
||
<span class="meta-item" id="lightbox-size">
|
||
<i class="fas fa-weight-hanging"></i>
|
||
0 KB
|
||
</span>
|
||
</div>
|
||
<div class="preview-center-controls">
|
||
<button class="preview-nav preview-prev" onclick="prevImage()" id="lightbox-prev">
|
||
<i class="fas fa-chevron-left"></i>
|
||
</button>
|
||
<span class="preview-counter" id="lightbox-counter">1 / 1</span>
|
||
<button class="preview-nav preview-next" onclick="nextImage()" id="lightbox-next">
|
||
<i class="fas fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="preview-controls">
|
||
<button class="preview-action preview-action-close" onclick="closeLightbox()">
|
||
<i class="fas fa-times"></i> 关闭
|
||
</button>
|
||
<button class="preview-action" onclick="addToFavoritesFromLightbox()" id="lightbox-favorite-btn">
|
||
<i class="fas fa-heart"></i> 加入收藏
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/assets/js/album.js?v=4"></script>
|
||
</body>
|
||
</html> |