forked from niklasbuschmann/contrast
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (104 loc) · 5.19 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
---
title: "Home"
layout: default
---
{% include home.html %}
<!-- {% if site.show_excerpts %}
{% include home.html %}
{% else %}
{% include archive.html title="Posts" %}
{% endif %} -->
<!-- <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
<div style="text-align: center; border: 0px solid #ddd; padding: 0px; overflow: hidden;">
<div style="width: 100%; aspect-ratio: 1 / 1; overflow: hidden;">
<a href="https://yeonghyeon.github.io/travel_europe_zurich1/">
<img src="/images/2024-02_Europe/240216_Zurich/IMG_6299.jpeg"
style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
</a>
</div>
</div>
<div style="text-align: center; border: 0px solid #ddd; padding: 0px; overflow: hidden;">
<div style="width: 100%; aspect-ratio: 1 / 1; overflow: hidden;">
<a href="https://yeonghyeon.github.io/travel_europe_zurich2/">
<img src="/images/2024-02_Europe/240217_Zurich/IMG_6371.jpeg"
style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
</a>
</div>
</div>
<div style="text-align: center; border: 0px solid #ddd; padding: 0px; overflow: hidden;">
<div style="width: 100%; aspect-ratio: 1 / 1; overflow: hidden;">
<a href="https://yeonghyeon.github.io/travel_europe_jungfraujoch/">
<img src="/images/2024-02_Europe/240218_Jungfraujoch/IMG_6709.jpeg"
style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
</a>
</div>
</div>
<div style="text-align: center; border: 0px solid #ddd; padding: 0px; overflow: hidden;">
<div style="width: 100%; aspect-ratio: 1 / 1; overflow: hidden;">
<a href="https://yeonghyeon.github.io/travel_europe_leman/">
<img src="/images/2024-02_Europe/240219_Leman/IMG_6832.jpeg"
style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
</a>
</div>
</div>
<div style="text-align: center; border: 0px solid #ddd; padding: 0px; overflow: hidden;">
<div style="width: 100%; aspect-ratio: 1 / 1; overflow: hidden;">
<a href="https://yeonghyeon.github.io/travel_europe_zermatt/">
<img src="/images/2024-02_Europe/240221_Zetmatt/IMG_7170.jpeg"
style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
</a>
</div>
</div>
<div style="text-align: center; border: 0px solid #ddd; padding: 0px; overflow: hidden;">
<div style="width: 100%; aspect-ratio: 1 / 1; overflow: hidden;">
<a href="https://yeonghyeon.github.io/travel_europe_colosseo/">
<img src="/images/2024-02_Europe/240229_Rome/IMG_7993.jpeg"
style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
</a>
</div>
</div>
</div> -->
<div id="image-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;"></div>
<script>
// 이미지 데이터 배열
const images = [
{ link: "https://yeonghyeon.github.io/travel_europe_zurich1/", src: "/images/2024-02_Europe/240216_Zurich/IMG_6299.jpeg" },
{ link: "https://yeonghyeon.github.io/travel_europe_zurich2/", src: "/images/2024-02_Europe/240217_Zurich/IMG_6371.jpeg" },
{ link: "https://yeonghyeon.github.io/travel_europe_jungfraujoch/", src: "/images/2024-02_Europe/240218_Jungfraujoch/IMG_6709.jpeg" },
{ link: "https://yeonghyeon.github.io/travel_europe_leman/", src: "/images/2024-02_Europe/240219_Leman/IMG_6832.jpeg" },
{ link: "https://yeonghyeon.github.io/travel_europe_zermatt/", src: "/images/2024-02_Europe/240221_Zetmatt/IMG_7170.jpeg" },
{ link: "https://yeonghyeon.github.io/travel_europe_colosseo/", src: "/images/2024-02_Europe/240229_Rome/IMG_8049.jpeg" },
{ link: "https://yeonghyeon.github.io/travel_europe_milan/", src: "/images/2024-02_Europe/240223_Milan/IMG_7368.jpeg" },
{ link: "https://yeonghyeon.github.io/travel_europe_sirmione/", src: "/images/2024-02_Europe/240224_Sirmione/IMG_7434.jpeg" },
{ link: "https://yeonghyeon.github.io/travel_europe_firenze-pisa/", src: "/images/2024-02_Europe/240225_Firenze_Pisa/IMG_7535.jpeg" },
{ link: "https://yeonghyeon.github.io/travel_europe_firenze2/", src: "/images/2024-02_Europe/240227_Firenze/IMG_7763.jpeg" }
];
// 배열을 랜덤하게 섞는 함수 (Fisher-Yates 알고리즘)
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]]; // 요소 교환
}
return array;
}
// 랜덤 섞기 적용
const shuffledImages = shuffleArray(images);
// DOM에 이미지 추가
const grid = document.getElementById('image-grid');
shuffledImages.forEach(image => {
const div = document.createElement('div');
div.style.textAlign = "center";
div.style.border = "0px solid #ddd";
div.style.padding = "0px";
div.style.overflow = "hidden";
div.innerHTML = `
<div style="width: 100%; aspect-ratio: 1 / 1; overflow: hidden;">
<a href="${image.link}" target="_blank">
<img src="${image.src}"
style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
</a>
</div>
`;
grid.appendChild(div);
});
</script>