-
Notifications
You must be signed in to change notification settings - Fork 0
/
exhibition.html
executable file
·73 lines (73 loc) · 5.11 KB
/
exhibition.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
<!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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>posExhibition</title>
</head>
<body class="container">
<div style = "text-align :center;" onclick="window.location.reload();">
<img id="logo" src="./img/logo.png">
<hr>
</div>
<article class="start">
<div style = "text-align : center;" class="posTitle">
<p>⭐️ 제 3회 별조각 사진 전시회 ⭐️</p>
<p id="posExplain">별조각 사진 전시회에 오신 것을 환영합니다.<br> 해당 사진을 클릭하면 <a style="color: rgb(255, 0, 0);">사진 제목 및 설명</a>을 보실수 있습니다.</p>
</div>
<div class="section" onclick="toDetail(1);">
<img id="frame" src="./img/1-1.jpeg" width="500" height="500">
<p id="fRank">공동 1등 김성현</p>
</div>
<div class="section" onclick="toDetail(2);">
<img id="frame" src="./img/1-2.jpeg" width="500" height="500">
<p id="fRank">공동 1등 성혁</p>
</div>
<div class="section" onclick="toDetail(3);">
<img id="frame" src="./img/3.jpeg" width="500" height="500">
<p id="fRank">3등 유승원</p>
</div>
</article>
<article class="detail">
<div class="dCenter">
<img id="dFrame" src="./img/gold.png" width="500" height="500">
<p id="rank">순위</p>
</div>
<p id="title">사진 제목</p>
<p id="explain">사진 설명</p>
<button id="difBtn" type="button" class="btn btn-secondary pt-3 pb-3" onclick="window.location.reload();">다른 작품도 보러가기</button>
</article>
<footer>
<hr>
<br>
<p>Develop by 별조각 임원진</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
var p={
1:{"rank":"★ [1등] 17학번 김성현 ★", "img":"./img/1-1.jpeg", "title":"달의 하루", "explain":"열흘간 변해 가는 달의 모습을 찍어 편집을 해보았습니다. 기말이라 과제에 치여 살고 있었는데 공모전이란 핑계로 매일 달을 감상하며 힐링하는 시간을 가질 수 있었습니다. 간만에 한숨을 돌리며 하늘을 바라보는 시간을 통해 피곤함을 회복하고 일의 능률이 올라 사진전에 참가하는 것으로 성적향상, 만병통치, 복덕원만 한 생활을 할 수 있게 되었습니다. 회장님이 올려주셔서 존재를 알게 된 스트로베리 문은 기대했던 것보다 붉은 모습을 볼 수는 없었지만 이전에 찍은 것과 비교했을 때 확연히 다른 색감을 볼 수 있어 회장님 덕분에 신기한 경험을 할 수 있었습니다."},
2:{"rank":"★ [1등] 22학번 성혁 ★", "img":"./img/1-2.jpeg", "title":"고요한 바다", "explain":"6월 5일 새벽, 하늘에 떠 있는 보름달을 찍은 사진이다. 조용하고 잔잔한 밤하늘 위에 보름달이 뚜렷하게 보인다. 보름달의 밝은 부분인 ‘고지’와 어두운 부분인 ‘바다’가 선명하게 경계 져 있어 마치 고요한 바다를 보는 듯하다. 깜깜한 밤에 홀로 태양 빛을 머금은 달이 신비로운 분위기를 자아내며 자고 있는 우리를 어둠으로부터 고요하게 지켜주는 느낌이 들었다. 사진을 찍으며 달이 이렇게나 밝았다는 점을 새삼 깨닫게 되었고, 평소엔 볼 수 없었던 달의 모습을 보름달이 뜰 때 직접 찍은 사진을 통해 보는 경험이 너무 신기했다."},
3:{"rank":"★ [3등] 19학번 유승원 ★", "img":"./img/3.jpeg", "title":"밝은 달", "explain":"6/3(토) 8시경 오금오름공원에서 촬영한 사진입니다. 일몰 시간대에 노을이 지는 동시에 반대편에 있는 산 뒤에서부터 하늘을 밝히러 나오는 달이 평소보다 더 밝게 빛나는 것 같아 그 모습을 카메라에 담아봤습니다."}
}
function toHome(){
$(".start").show();
$(".detail").hide();
}
function toDetail(i){
$(".start").hide();
$(".detail").show();
next(i);
}
function next(i){
$("#rank").html(p[i]["rank"]);
$("#dFrame").attr("src",p[i]["img"]);
$("#title").html(p[i]["title"]);
$("#explain").html(p[i]["explain"]);
}
</script>
</body>
</html>