-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
126 lines (119 loc) · 4.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luc Thien Phong's Gallery</title>
<link rel="icon" href="https://cdn.crfnetwork.com/images/crf/crf-logo-clean.png" type="image/x-icon">
<meta property="og:title" content="Luc Thien Phong's Gallery">
<meta property="og:description" content="My certification Showcase">
<meta property="og:image" content="https://cdn.crfnetwork.com/images/crf/crf-banner.png">
<meta property="og:url" content="https://ltp.crfnetwork.com/gallery/">
<meta property="og:type" content="website">
<link rel="stylesheet" href="./dist/style.css">
<link rel="stylesheet" href="./dist/img-previewer.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<h2 class="title">{{infos.title}}</h2>
<p class="description">{{infos.description}}</p>
<p class="note">{{infos.note}}</p>
<p class="album-count">Total Images: <span> 0 </span></p>
<div id="gallery">
<section v-for="(items, title) in albums" v-bind:name="title">
<details>
<summary class="album-name" v-bind:id="title">
<i>{{title}}</i>
<span>({{items.length}})</span>
</summary>
<div class="album-content">
<div class="album-photo" v-for="item in items">
<!-- <a v-bind:href="item.src" target="_blank"> -->
<img class="photo" v-bind:src="item.src" loading="lazy" alt="certification">
<!-- </a> -->
</div>
</div>
</details>
</section>
</div>
<button class="scroll-top-btn" @click="scrollToTop">
Scroll to Top
</button>
</div>
</body>
<script src="./dist/img-previewer.js"></script>
<script type="module">
const app = new Vue({
el: '#app',
data: {
infos: {}, // Khởi tạo rỗng
albums: {}, // Khởi tạo rỗng
},
computed: {
totalImages() {
let count = 0;
for (let title in this.albums) {
count += this.albums[title].length;
}
return count;
}
},
methods: {
scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
},
initImgPreviewer() {
this.$nextTick(() => {
const imgPreviewer = new ImgPreviewer('#app', {
scrollbar: true
});
});
},
albumsCountAnimation() {
const albumCount = document.querySelector('.album-count span');
const totalImages = this.totalImages;
let count = 0;
let waitTime = 100;
albumCount.textContent = count;
const interval = setInterval(() => {
count++;
albumCount.textContent = count;
if (count === totalImages) {
clearInterval(interval);
}
if (waitTime > 2) {
waitTime -= 2;
}
}, waitTime);
},
addIdToUrl(id) {
window.location.hash = id;
}
},
async mounted() {
try {
// Nạp dữ liệu từ các tệp JSON
const [infoRes, albumsRes] = await Promise.all([
fetch('./data/info.json'),
fetch('./data/config.json')
]);
// Gán dữ liệu vào các thuộc tính Vue
this.infos = await infoRes.json();
this.albums = await albumsRes.json();
// Thiết lập tiêu đề trang
document.title = this.infos.name;
// Chạy các chức năng bổ sung
this.albumsCountAnimation();
this.initImgPreviewer();
} catch (error) {
console.error('Error loading JSON data:', error);
}
}
});
</script>
</html>