지도와 갤러리 게시판 정보
게시판 지도와 갤러리 게시판
관련링크
첨부파일
테스트한 버전5.5.4
호환 가능 버전5.3이상 가능할 것 같습니다
본문
카카오맵을 나타내주는 게시판을 만들어 팁으로 공유한 적이 있습니다.(https://sir.kr/g5_tip/19510)
이 게시판으로 커스텀하다가 갤러리 밑에 지도를 넣어도 좋겠다 싶어서 지도와 갤러리게시판이 되었습니다.
https://sir.kr/g5_tip/19398 과 https://www.w3schools.com/howto/howto_js_image_grid.asp 을 사용했습니다.
감사의 말씀드립니다.
압축을 풀면 gallery_map_pc, gallery_map_mobile 두개의 폴더가 나옵니다.
그누보드 순정기준으로
gallery_map_pc는 skin/board/gallery_map_pc 경로가 되도록 업로드합니다.
gallery_map_mobile는 mobile/skin/board/gallery_map_mobile 경로가 되로록 업로드합니다.
그리고 일반적인 게시판을 적용하는 방법으로 적용하시면 됩니다.
글쓰기입니다.
여분필드 wr_1 ~ wr_3는 카카오맵을 출력하는데 사용했습니다.
카카오맵 타임스탬프값, 키값 그리고 가로 100%에 대한 세로 값을 넣어줍니다.
여분필드 wr_4 ~ wr_10는 갤러리 이미지를 넣는데 사용했습니다.
이미지의 경로를 입력해주시면 됩니다. <예>https://example.com/images/suzy.png
이미지 그리드 숫자를 클릭하면 한줄에 보여지는 이미지 갯수를 조절할 수 있습니다.
이미지가 보여지는 순서등은 view.skin.php에서 적절하게 정하시면 됩니다.
갤러리 아래에 카카오맵이 출력되게 하였습니다.
write.skin.php
<!-- kakao map start -->
<div class="bo_w_info write_div">
<label for="wr_1" class="sound_only">카카오맵타임스탬프<strong>필수</strong></label>
<input type="text" name="wr_1" value="<?php echo $write['wr_1'] ?>" id="wr_1" required class="frm_input half_input required" placeholder="카카오맵타임스탬프:예--1669399050974">
<label for="wr_2" class="sound_only">카카오키값<strong>필수</strong></label>
<input style="margin-left: 8px" type="text" name="wr_2" value="<?php echo $write['wr_2'] ?>" id="wr_2" required class="frm_input half_input required" placeholder="카카오맵키값:예--2cqyu">
<label for="wr_3" class="sound_only">가로100%에대한 세로비율<strong>필수</strong></label>
<input type="text" name="wr_3" value="<?php echo $write['wr_3'] ?>" id="wr_3" required class="frm_input full_input required" placeholder="가로100%에대한 세로비율<예>50">
</div>
<!-- kakao map end -->
<!-- gallery -->
<div class="bo_w_info write_div">
<input type="text" name="wr_4" value="<?php echo $write['wr_4'] ?>" id="wr_4" required class="frm_input half_input required" placeholder="이미지경로:<예>https://example.com/images/suzy.png">
<input type="text" name="wr_5" value="<?php echo $write['wr_5'] ?>" id="wr_5" required class="frm_input half_input required" placeholder="image path">
<input type="text" name="wr_6" value="<?php echo $write['wr_6'] ?>" id="wr_6" required class="frm_input half_input required" placeholder="image path">
<input type="text" name="wr_7" value="<?php echo $write['wr_7'] ?>" id="wr_7" required class="frm_input half_input required" placeholder="image path">
<input type="text" name="wr_8" value="<?php echo $write['wr_8'] ?>" id="wr_8" required class="frm_input half_input required" placeholder="image path">
<input type="text" name="wr_9" value="<?php echo $write['wr_9'] ?>" id="wr_9" required class="frm_input half_input required" placeholder="image path">
<input type="text" name="wr_10" value="<?php echo $write['wr_10'] ?>" id="wr_10" required class="frm_input half_input required" placeholder="image path">
</div>
<!-- gallery -->view.skin.php
<!-- gallery and kakao map -->
<style>
/* kakao map */
#tablek { border-spacing: 0; width: 100%; }
.thk, .tdk{ border: 1px solid #ddd;border-collapse: collapse;}
.thk { background-color: #f2f2f2; text-align: center; padding: 6px; font-size:15px;}
.tdk { padding:1px;}
/* kakao map */
/* gallery */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
text-align: center;
padding: 5px;
}
.row {
display: -ms-flexbox; /* IE 10 */
display: flex;
-ms-flex-wrap: wrap; /* IE 10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create two equal columns that sits next to each other */
.column {
-ms-flex: 50%; /* IE 10 */
flex: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;}
/* gallery */
</style>
<!-- gallery -->
<!-- Header -->
<div class="header" id="myHeader">
<h1 id="h1k">Image Grid</h1>
<p id="pk">Click on the buttons to change the grid view.</p>
<button class="btn" onclick="one()">1</button>
<button class="btn active" onclick="two()">2</button>
<button class="btn" onclick="three()">3</button>
<button class="btn" onclick="four()">4</button>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="<?php echo $view['wr_10'];?>" style="width:100%">
<img src="<?php echo $view['wr_4'];?>" style="width:100%">
<img src="<?php echo $view['wr_5'];?>" style="width:100%">
<img src="<?php echo $view['wr_6'];?>" style="width:100%">
<img src="<?php echo $view['wr_7'];?>" style="width:100%">
<img src="<?php echo $view['wr_8'];?>" style="width:100%">
<img src="<?php echo $view['wr_9'];?>" style="width:100%">
</div>
<div class="column">
<img src="<?php echo $view['wr_10'];?>" style="width:100%">
<img src="<?php echo $view['wr_6'];?>" style="width:100%">
<img src="<?php echo $view['wr_5'];?>" style="width:100%">
<img src="<?php echo $view['wr_8'];?>" style="width:100%">
<img src="<?php echo $view['wr_6'];?>" style="width:100%">
<img src="<?php echo $view['wr_5'];?>" style="width:100%">
</div>
<div class="column">
<img src="<?php echo $view['wr_10'];?>" style="width:100%">
<img src="<?php echo $view['wr_7'];?>" style="width:100%">
<img src="<?php echo $view['wr_4'];?>" style="width:100%">
<img src="<?php echo $view['wr_5'];?>" style="width:100%">
<img src="<?php echo $view['wr_6'];?>" style="width:100%">
<img src="<?php echo $view['wr_9'];?>" style="width:100%">
<img src="<?php echo $view['wr_10'];?>" style="width:100%">
</div>
<div class="column">
<img src="<?php echo $view['wr_7'];?>" style="width:100%">
<img src="<?php echo $view['wr_8'];?>" style="width:100%">
<img src="<?php echo $view['wr_3'];?>" style="width:100%">
<img src="<?php echo $view['wr_10'];?>" style="width:100%">
<img src="<?php echo $view['wr_5'];?>" style="width:100%">
<img src="<?php echo $view['wr_4'];?>" style="width:100%">
</div>
</div>
<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");
// Declare a loop variable
var i;
// Full-width images
function one() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "100%"; // IE10
elements[i].style.flex = "100%";
}
}
// Two images side by side
function two() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "50%"; // IE10
elements[i].style.flex = "50%";
}
}
// Three images side by side
function three() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "33.3%"; // IE10
elements[i].style.flex = "33.3%";
}
}
// Four images side by side
function four() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "25%"; // IE10
elements[i].style.flex = "25%";
}
}
// Add active class to the current button (highlight it)
var header = document.getElementById("myHeader");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
<!-- gallery -->
<br>
<!-- kakao map start -->
<script src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<table id="tablek">
<tr> <th class="thk">찾아오는길</th> </tr>
<tr> <td class="tdk">
<script>
function kakaoMap(...map) {
document.write("<div id='" + "daumRoughmapContainer" + map[0] + "' class='root_daum_roughmap root_daum_roughmap_landing' style='width:100%;box-sizing:border-box'></div>");
new daum.roughmap.Lander({
"timestamp" : map[0], "key" : map[1], "mapWidth" : "100%",
"mapHeight" : document.querySelector("#daumRoughmapContainer" + map[0]).offsetWidth * map[2] / 100 - 32
}).render();
}
</script>
<script>kakaoMap("<?php echo $view['wr_1']; // 타임스탬프값 ?>", "<?php echo $view['wr_2']; // 키값 ?>", "<?php echo $view['wr_3']; // 가로 100%에 대한 세로 비율 ?>");</script>
</td>
</tr>
</table><!-- kakao man end -->
감사합니다.^^
추천
18
18
댓글 전체
좋은 스킨 감사합니다~~^^*
따뜻한 격려말씀 감사합니다.
감사합니다!!!
관심가져주셔서 감사합니다.
파이팅
열린이님의 파이팅에서 힘을 얻습니다. 감사합니다
추천합니다.
추천해주셔서 감사합니다.
비타주리님 스킨과 팁을 보고 많이 배우고 있습니다.
비타주리님 스킨과 팁을 보고 많이 배우고 있습니다.
공개 감사합니다. 홧팅!!
격려해주셔서 감사합니다.^^
고생하셨습니다. ^^
오늘도 즐거운 하루 되세요.
오늘도 즐거운 하루 되세요.
감사합니다. Daniel74님도 즐거운 하루되시길 바랍니다.
추천합니다.
푸른산타님 추천, 감사합니다.
감사 합니다.
항상 감사드립니다. 들레아빠님^^
추천합니다.
추천해주셔서 감사합니다. 많이 추운데 감기조심하세요^^
좋으네요 감사합니다.
트리플님처럼 고수님이 격려해주셔서 감사합니다.^^
감사합니다.
관심가져주셔서 감사합니다
추천합니다.
