카카오맵을 나타내주는 게시판을 만들어 팁으로 공유한 적이 있습니다.(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

[code]<!-- 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 -->[/code]

view.skin.php

[code]

<!--  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 -->

[/code]

감사합니다.^^