리빌더 부분 추가

theme/rb.basic/mobile/skin/latest/basic/latest.carousel.js

@@ -0,0 +1,101 @@
+jQuery(function($){
+    $(document).ready(function(){
+        
+		$(".owl-carousel-wrap .sv_member").off('click').off('focusin');
+		
+		if ($.fn.tooltipster) {
+			var $member_menu_tip = $('.owl-carousel-wrap .sv_member').tooltipster({
+					theme: 'tooltipster-sir',
+					trigger: 'custom',
+					contentAsHTML: true,
+					interactive: true,
+					distance: 5,
+					position:'bottom',
+					coord: {
+						left: 20,
+						bottom: 0
+					},
+					triggerOpen: {
+						click: true,
+						tap: true    // For touch device
+					},
+					triggerClose: {
+						click: true,
+						scroll: true,
+						tap: true
+					},
+					functionBefore: function(instance, helper) {
+						var content = $(helper.origin).parent().find('.sv')[0].outerHTML;
+						instance.content(content);
+					},
+					functionReady : function(instance, helper) {
+						$(helper.tooltip).find(".tooltipster-arrow").css({left:16});
+					},
+					functionPosition: function(instance, helper, position){
+						position.coord.left += 7;
+						return position;
+					}
+			});
+		}
+
+        var carousels = [],
+            is_loop = true;
+
+        function owl_show_page(event){
+
+            if (event.item) {
+                var count = event.item.count,
+                    item_index = event.item.index,
+                    index = 1;
+
+                if( is_loop ){
+                    index = ( 1 + ( event.property.value - Math.ceil( event.item.count / 2 ) ) % event.item.count || 0 ) || 1;
+                } else {
+                    index = event.item.index ? event.item.index + 1 : 1;
+                }
+
+                var str = "<b>"+index+"</b>/"+count;
+
+                $(event.target).next(".lt_page").find(".page_print").html(str);
+            }
+        }
+
+        $(".lt.owl-carousel-wrap").each(function(index, value) {
+
+            var $this = $(this),
+                item_loop_c = ($this.children('.latest-sel').find(".item").length > 1) ? 1 : 0 ;
+            
+            carousels['sel' + index] = $this.children('.latest-sel').addClass("owl-carousel").owlCarousel({
+                items:1,
+                loop: is_loop && item_loop_c,
+                center:true,
+                autoHeight:true,
+                dots:false,
+                onChanged:function(event){
+                    owl_show_page(event);
+                },
+            });
+			
+			carousels['sel' + index].on('changed.owl.carousel', function(event) {
+				
+				if ($.fn.tooltipster) {
+					var instances = $.tooltipster.instances();
+					$.each(instances, function(i, instance){
+						instance.close();
+					});
+				}
+			});
+
+            $this.on("click", ".lt_page_next", function(e) {
+                e.preventDefault();
+                carousels['sel' + index].trigger('next.owl.carousel');
+            });
+
+            $this.on("click", ".lt_page_prev", function(e) {
+                e.preventDefault();
+                carousels['sel' + index].trigger('prev.owl.carousel');
+            });
+
+        });     // each
+    });
+});

theme/rb.basic/mobile/skin/latest/basic/latest.skin.php

@@ -0,0 +1,86 @@
+<?php
+if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
+include_once(G5_LIB_PATH.'/thumbnail.lib.php');
+
+add_javascript('<script src="'.G5_JS_URL.'/owlcarousel/owl.carousel.min.js"></script>', 10);
+add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/owlcarousel/owl.carousel.min.css">', 10);
+
+add_javascript('<script src="'.G5_JS_URL.'/tooltipster/tooltipster.bundle.min.js"></script>', 11);
+add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/tooltipster/tooltipster.bundle.min.css">', 11);
+add_javascript('<script src="'.$latest_skin_url.'/latest.carousel.js?v2"></script>', 12);
+
+// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
+add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css?v2">', 1);
+$thumb_width = 138;
+$thumb_height = 80;
+$list_count = (is_array($list) && $list) ? count($list) : 0;
+$divisor_count = 4;
+$start_page_num = $list_count ? '1' : '0';
+$is_show_next_prev = ($list_count > 4) ? 1 : 0;
+?>
+
+<div class="lt owl-carousel-wrap">
+    <a href="<?php echo get_pretty_url($bo_table); ?>" class="lt_title"><strong><?php echo $bo_subject; ?></strong></a>
+    <div class="<?php echo $list_count ? 'latest-sel' : ''; ?>">
+        <ul class="item">
+            <?php
+            for ($i=0; $i<$list_count; $i++) {
+            $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
+            $img = $thumb['src'] ? $thumb['src'] : '';
+            $img_content = $img ? '<img src="'.$img.'" alt="'.$thumb['alt'].'" >' : '';
+            $wr_href = get_pretty_url($bo_table, $list[$i]['wr_id']);
+
+            $echo_ul = ( $i && (($i % $divisor_count) === 0) ) ? '</ul><ul class="item">'.PHP_EOL : '';
+
+            echo $echo_ul;
+            ?>
+            <li>
+                <?php
+                //echo $list[$i]['icon_reply']." ";
+                
+                if( $img_content ){
+                    echo "<a href=\"".$wr_href."\" class=\"lt_thumb\">".run_replace('thumb_image_tag', $img_content, $thumb)."</a> ";
+                }
+                
+                echo "<a href=\"".$wr_href."\" class=\"lt_tit\">";
+                if ($list[$i]['icon_secret']) echo "<i class=\"fa fa-lock\" aria-hidden=\"true\"></i> ";
+                if ($list[$i]['is_notice'])
+                    echo "<strong>".$list[$i]['subject']."</strong>";
+                else
+                    echo $list[$i]['subject'];
+
+                    // if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
+                    // if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
+
+                if ($list[$i]['icon_new']) echo " <span class=\"new_icon\">N</span>";
+                if ($list[$i]['icon_file']) echo " <i class=\"fa fa-download\" aria-hidden=\"true\"></i>" ;
+                if ($list[$i]['icon_link']) echo " <i class=\"fa fa-link\" aria-hidden=\"true\"></i>" ;
+                if ($list[$i]['icon_hot']) echo " <i class=\"fa fa-heart\" aria-hidden=\"true\"></i>";
+                
+                if ($list[$i]['comment_cnt'])  echo "
+                <span class=\"lt_cmt\"><span class=\"sound_only\">댓글</span>".$list[$i]['comment_cnt']."</span>";
+                echo "</a>";
+                ?>
+               
+                <div class="lt_info">
+                    <?php echo $list[$i]['name'] ?>
+                    <span class="lt_date">
+                        <?php echo $list[$i]['datetime'] ?>
+                    </span>
+                </div>
+            </li>
+            <?php }     //end for ?>
+            <?php if ($list_count == 0) { //게시물이 없을 때 ?>
+            <li class="empty_li">게시물이 없습니다.</li>
+            <?php }     //end if ?>
+        </ul>
+    </div>
+    <?php if ($is_show_next_prev){  // $divisor_count 이상의 값이 있을경우에만 출력 ?>
+	<div class="lt_page">
+		<button class="lt_page_prev"><span class="sound_only">이전페이지</span><i class="fa fa-caret-left" aria-hidden="true"></i></button>
+		<span class="page_print"><b><?php echo $start_page_num; ?></b>/<?php echo $start_page_num; ?></span>
+		<button class="lt_page_next"><span class="sound_only">다음페이지</span><i class="fa fa-caret-right" aria-hidden="true"></i></button>
+	</div>
+    <?php } ?>
+    <a href="<?php echo get_pretty_url($bo_table); ?>" class="lt_more"><span class="sound_only"><?php echo $bo_subject ?></span>전체보기</a>
+</div>

theme/rb.basic/mobile/skin/latest/basic/style.css

@@ -0,0 +1,46 @@
+@charset "utf-8";
+
+/* 최근게시물 스킨 (latest) */
+.lt {position:relative;margin:10px 0;background:#fff}
+.lt .lt_title {display:block;font-size:1.3em;padding:15px 15px 0;line-height:24px;background:#fff}
+.lt ul {list-style:none;padding:0 15px;background:#fff;border-bottom:1px solid #e5ecee}
+.lt ul li {padding:15px 0;border-bottom:1px solid #e5ecee}
+.lt ul li:last-child {border-bottom:0}
+.lt ul li:after {display:block;visibility:hidden;clear:both;content:""}
+.lt ul li:hover a.lt_tit {color:#3a8afd}
+.lt .lt_thumb {display:inline-block;float:left;margin-right:10px}
+.lt .lt_thumb img, .lt .lt_thumb video {width:138px !important;height:auto;overflow:hidden}
+.lt .lt_tit {display:block;font-size:1.2em;font-weight:bold;max-height:60px;overflow:hidden;padding-bottom:10px}
+.lt .lt_info {display:inline-block;position:relative;line-height:20px;color:#828282;font-size:0.925em;vertical-align:top}
+.lt .lt_date {color:#828282}
+.lt .latest-sel{margin-top:1px}
+
+.lt .lt_more {position:absolute;top:15px;right:15px;color:#3a8afd;background:#fff;border:1px solid #d1d7e5;font-size:0.925em;border-radius:3px;padding:4px 5px;z-index:1}
+.lt .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
+
+.lt .profile_img img {border-radius:50%;vertical-align:top}
+.lt li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
+.lt li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
+.lt li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}
+.lt li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
+.lt li .fa-heart {color:#ff0000}
+.lt li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.75em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
+.lt .lt_tit .fa-heart {color:#fe4560;margin-left:5px}
+
+.lt .comment_icon {background:url('./img/icon_comment.png') no-repeat 50% 50%;display:inline-block;width:20px;height:28px;text-indent:-999px;overflow:hidden;vertical-align:top;background-size:70%;margin:0 0px 0 5px}
+.lt .empty_li {text-align:center;padding:40px 0;color:#777}
+
+.lt .owl-carousel .owl-item .profile_img img{width:auto;display:inline}
+
+.tooltipster-content .sv a{display:block;padding:0 10px;line-height:30px;font-weight:normal;color:#bbb}
+.tooltipster-content .sv a:hover{background:#000;color:#fff}
+.tooltipster-sidetip.tooltipster-sir .tooltipster-content{padding:0}
+.tooltipster-sidetip.tooltipster-sir .tooltipster-box{border:0 none;background:#333;border-radius:0}
+.tooltipster-sidetip.tooltipster-sir.tooltipster-bottom .tooltipster-arrow-border, .tooltipster-sidetip.tooltipster-sir.tooltipster-bottom .tooltipster-arrow-background{border-bottom-color:#333}
+
+.lt_page {background:#fff;text-align:center;padding:10px 15px;line-height:25px;border-bottom:1px solid #e5ecee}
+.lt_page button {display:inline-block;background:#fff;width:25px;height:25px;border:1px solid #dbdee6;text-align:center;color:#cdcdce}
+.lt_page span {color:#6e6e6e}
+.lt_page b {color:#000}
+.lt_page_prev {float:left}
+.lt_page_next {float:right}