모바일 갤러리 리스트 정렬 스크립트 추가 및 view 이미지 리사이즈 스크립트 변경

adm/board_copy_update.php

@@ -84,7 +84,6 @@ $sql = " insert into {$g5['board_table']}
                 bo_gallery_cols = '{$board[bo_gallery_cols]}',
                 bo_gallery_width = '{$board[bo_gallery_width]}',
                 bo_gallery_height = '{$board[bo_gallery_height]}',
-                bo_mobile_gallery_cols = '{$board[bo_mobile_gallery_cols]}',
                 bo_mobile_gallery_width = '{$board[bo_mobile_gallery_width]}',
                 bo_mobile_gallery_height = '{$board[bo_mobile_gallery_height]}',
                 bo_upload_size = '{$board[bo_upload_size]}',

adm/board_form.php

@@ -30,7 +30,7 @@ if (!isset($board['bo_mobile_skin'])) {
 }
 
 if (!isset($board['bo_gallery_width'])) {
-    sql_query(" ALTER TABLE `{$g5['board_table']}` ADD `bo_gallery_width` INT NOT NULL AFTER `bo_gallery_cols`,  ADD `bo_gallery_height` INT NOT NULL DEFAULT '0' AFTER `bo_gallery_width`,  ADD `bo_mobile_gallery_cols` INT NOT NULL DEFAULT '0' AFTER `bo_gallery_height`,  ADD `bo_mobile_gallery_width` INT NOT NULL DEFAULT '0' AFTER `bo_mobile_gallery_cols`,  ADD `bo_mobile_gallery_height` INT NOT NULL DEFAULT '0' AFTER `bo_mobile_gallery_width` ", false);
+    sql_query(" ALTER TABLE `{$g5['board_table']}` ADD `bo_gallery_width` INT NOT NULL AFTER `bo_gallery_cols`,  ADD `bo_gallery_height` INT NOT NULL DEFAULT '0' AFTER `bo_gallery_width`,  ADD `bo_mobile_gallery_width` INT NOT NULL DEFAULT '0' AFTER `bo_gallery_height`,  ADD `bo_mobile_gallery_height` INT NOT NULL DEFAULT '0' AFTER `bo_mobile_gallery_width` ", false);
 }
 
 if (!isset($board['bo_mobile_subject_len'])) {
@@ -101,7 +101,6 @@ if ($w == '') {
     $board['bo_gallery_cols'] = 4;
     $board['bo_gallery_width'] = 174;
     $board['bo_gallery_height'] = 124;
-    $board['bo_mobile_gallery_cols'] = 3;
     $board['bo_mobile_gallery_width'] = 125;
     $board['bo_mobile_gallery_height'] = 100;
     $board['bo_table_width'] = 100;
@@ -988,19 +987,6 @@ $pg_anchor = '<ul class="anchor">
             <label for="chk_all_gallery_height">전체적용</label>
         </td>
     </tr>
-    <tr>
-        <th scope="row"><label for="bo_mobile_gallery_cols">모바일<br>갤러리 이미지 수<strong class="sound_only">필수</strong></label></th>
-        <td>
-            <?php echo help('모바일로 접속시 갤러리 형식의 게시판 목록에서 이미지를 한줄에 몇장씩 보여 줄 것인지를 설정하는 값') ?>
-            <input type="text" name="bo_mobile_gallery_cols" value="<?php echo $board['bo_mobile_gallery_cols'] ?>" id="bo_mobile_gallery_cols" required class="required numeric frm_input" size="4">
-        </td>
-        <td class="group_setting">
-            <input type="checkbox" name="mobile_chk_grp_gallery_cols" id="mobile_chk_grp_gallery_cols" value="1">
-            <label for="mobile_chk_grp_gallery_cols">그룹적용</label>
-            <input type="checkbox" name="mobile_chk_all_gallery_cols" id="mobile_chk_all_gallery_cols" value="1">
-            <label for="mobile_chk_all_gallery_cols">전체적용</label>
-        </td>
-    </tr>
     <tr>
         <th scope="row"><label for="bo_mobile_gallery_width">모바일<br>갤러리 이미지 폭<strong class="sound_only">필수</strong></label></th>
         <td>

adm/board_form_update.php

@@ -100,7 +100,6 @@ $sql_common = " gr_id               = '{$_POST['gr_id']}',
                 bo_gallery_cols     = '{$_POST['bo_gallery_cols']}',
                 bo_gallery_width    = '{$_POST['bo_gallery_width']}',
                 bo_gallery_height   = '{$_POST['bo_gallery_height']}',
-                bo_mobile_gallery_cols  = '{$_POST['bo_mobile_gallery_cols']}',
                 bo_mobile_gallery_width = '{$_POST['bo_mobile_gallery_width']}',
                 bo_mobile_gallery_height= '{$_POST['bo_mobile_gallery_height']}',
                 bo_upload_count     = '{$_POST['bo_upload_count']}',
@@ -264,7 +263,6 @@ if (is_checked('chk_grp_mobile_skin'))          $grp_fields .= " , bo_mobile_ski
 if (is_checked('chk_grp_gallery_cols'))         $grp_fields .= " , bo_gallery_cols = '{$bo_gallery_cols}' ";
 if (is_checked('chk_grp_gallery_width'))        $grp_fields .= " , bo_gallery_width = '{$bo_gallery_width}' ";
 if (is_checked('chk_grp_gallery_height'))       $grp_fields .= " , bo_gallery_height = '{$bo_gallery_height}' ";
-if (is_checked('chk_grp_mobile_gallery_cols'))  $grp_fields .= " , bo_mobile_gallery_cols = '{$bo_mobile_gallery_cols}' ";
 if (is_checked('chk_grp_mobile_gallery_width')) $grp_fields .= " , bo_mobile_gallery_width = '{$bo_mobile_gallery_width}' ";
 if (is_checked('chk_grp_mobile_gallery_height'))$grp_fields .= " , bo_mobile_gallery_height = '{$bo_mobile_gallery_height}' ";
 if (is_checked('chk_grp_table_width'))          $grp_fields .= " , bo_table_width = '{$bo_table_width}' ";
@@ -349,7 +347,6 @@ if (is_checked('chk_all_mobile_skin'))          $all_fields .= " , bo_mobile_ski
 if (is_checked('chk_all_gallery_cols'))         $all_fields .= " , bo_gallery_cols = '{$bo_gallery_cols}' ";
 if (is_checked('chk_all_gallery_width'))        $all_fields .= " , bo_gallery_width = '{$bo_gallery_width}' ";
 if (is_checked('chk_all_gallery_height'))       $all_fields .= " , bo_gallery_height = '{$bo_gallery_height}' ";
-if (is_checked('chk_all_mobile_gallery_cols'))  $all_fields .= " , bo_mobile_gallery_cols = '{$bo_mobile_gallery_cols}' ";
 if (is_checked('chk_all_mobile_gallery_width')) $all_fields .= " , bo_mobile_gallery_width = '{$bo_mobile_gallery_width}' ";
 if (is_checked('chk_all_mobile_gallery_height'))$all_fields .= " , bo_mobile_gallery_height = '{$bo_mobile_gallery_height}' ";
 if (is_checked('chk_all_table_width'))          $all_fields .= " , bo_table_width = '{$bo_table_width}' ";

install/gnuboard5.sql

@@ -81,7 +81,6 @@ CREATE TABLE IF NOT EXISTS `g5_board` (
   `bo_gallery_cols` int(11) NOT NULL DEFAULT '0',
   `bo_gallery_width` int(11) NOT NULL DEFAULT '0',
   `bo_gallery_height` int(11) NOT NULL DEFAULT '0',
-  `bo_mobile_gallery_cols` int(11) NOT NULL DEFAULT '0',
   `bo_mobile_gallery_width` int(11) NOT NULL DEFAULT '0',
   `bo_mobile_gallery_height` int(11) NOT NULL DEFAULT '0',
   `bo_upload_size` int(11) NOT NULL DEFAULT '0',

js/jquery.fancylist.js

@@ -0,0 +1,62 @@
+(function($) {
+    $.fn.fancyList = function(element, clear)
+    {
+        var cfg = {
+                element: "li",
+                clear: "clear"
+            };
+
+        if(typeof element == "object")
+            cfg = $.extend( cfg, element );
+        else {
+            if(element)
+                cfg = $.extend( cfg, { element: element } );
+            if(clear)
+                cfg = $.extend( cfg, { clear: clear } );
+        }
+
+        var $element = this.find(cfg.element);
+        var $this = this;
+
+        function item_arrange()
+        {
+            var $el = $element.filter(":first");
+            var padding = 0;
+            if($el.data("padding-right") == undefined) {
+                padding = parseInt($el.css("padding-right"));
+                $el.data("padding-right", padding);
+            }
+            else
+                padding = $el.data("padding-right");
+
+            $element.css("padding-left", 0).css("padding-right", padding);
+            $element.filter("."+cfg.clear).removeClass(cfg.clear);
+
+            var wrap_width = parseInt($this.width());
+            var item_width = parseInt($el.outerWidth());
+            var line_count = parseInt((wrap_width + padding) / item_width);
+
+            if(line_count == 0)
+                return;
+
+            var space = parseInt(wrap_width % item_width);
+
+            if((space + padding) < item_width) {
+                space = wrap_width - ((item_width - padding) * line_count);
+                var new_padding = parseInt(space / (line_count * 2));
+
+                if(new_padding > padding)
+                    $element.css("padding-left", new_padding+"px").css("padding-right", new_padding);
+            }
+
+            $element.filter(":nth-child("+line_count+"n)").css("padding-right", 0);
+            $element.filter(":nth-child("+line_count+"n+1)").addClass(cfg.clear);
+        }
+
+        item_arrange();
+
+        $(window).resize(function() {
+            item_arrange();
+        });
+    }
+}(jQuery));

js/viewimageresize.js

@@ -0,0 +1,43 @@
+(function($) {
+    $.fn.viewimageresize = function(selector)
+    {
+        var cfg = {
+                selector: "img"
+            };
+
+        if(typeof selector == "object") {
+            cfg = $.extend(cfg, selector);
+        } else {
+            if(selector) {
+                cfg = $.extend({ selector: selector });
+            }
+        }
+
+        var $img = this.find(cfg.selector);
+        var width = this.width();
+
+        function image_resize()
+        {
+            $img.each(function() {
+                $(this).removeAttr("width")
+                       .removeAttr("height")
+                       .css("width","");
+
+                if($(this).data("width") == undefined)
+                    $(this).data("width", $(this).width());
+
+                if($(this).data("width") > width) {
+                    $(this).css("width", "100%");
+                }
+            });
+        }
+
+        $(window).on("load", function() {
+            image_resize();
+        });
+
+        $(window).on("resize", function() {
+            image_resize();
+        });
+    }
+}(jQuery));

mobile/skin/board/basic/view.skin.php

@@ -4,6 +4,7 @@ include_once(G5_LIB_PATH.'/thumbnail.lib.php');
 ?>
 
 <link rel="stylesheet" href="<?php echo $board_skin_url ?>/style.css">
+<script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script>
 
 <div id="bo_v_table"><?php echo $board['bo_subject']; ?></div>
 
@@ -226,6 +227,9 @@ $(function() {
         excute_good(this.href, $(this), $tx);
         return false;
     });
+
+    // 이미지 리사이즈
+    $("#bo_v_atc").viewimageresize();
 });
 
 function excute_good(href, $el, $tx)

mobile/skin/board/gallery/list.skin.php

@@ -4,6 +4,7 @@ include_once(G5_LIB_PATH.'/thumbnail.lib.php');
 ?>
 
 <link rel="stylesheet" href="<?php echo $board_skin_url ?>/style.css">
+<script src="<?php echo G5_JS_URL; ?>/jquery.fancylist.js"></script>
 
 <?php if (!$wr_id) { ?><h1 id="bo_list_title"><?php echo $g5['title'] ?></h1><?php } ?>
 
@@ -48,13 +49,6 @@ include_once(G5_LIB_PATH.'/thumbnail.lib.php');
 
     <ul id="gall_ul">
         <?php for ($i=0; $i<count($list); $i++) {
-            if($i>0 && ($i % $board['bo_mobile_gallery_cols'] == 0))
-                $style = 'clear:both;';
-            else
-                $style = '';
-            if ($i == 0) $k = 0;
-            $k += 1;
-            if ($k % $board['bo_mobile_gallery_cols'] == 0) $style .= "margin:0 !important;";
         ?>
         <li class="gall_li <?php if ($wr_id == $list[$i]['wr_id']) { ?>gall_now<?php } ?>">
             <?php if ($is_checkbox) { ?>
@@ -145,6 +139,12 @@ include_once(G5_LIB_PATH.'/thumbnail.lib.php');
     </form>
 </div>
 
+<script>
+$(window).on("load", function() {
+    $("#gall_ul").fancyList(".gall_li", "gall_clear");
+});
+</script>
+
 <?php if($is_checkbox) { ?>
 <noscript>
 <p>자바스크립트를 사용하지 않는 경우<br>별도의 확인 절차 없이 바로 선택삭제 처리하므로 주의하시기 바랍니다.</p>

mobile/skin/board/gallery/style.css

@@ -71,7 +71,7 @@
 #bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none}
 #bo_cate #bo_cate_on {z-index:2;border:1px solid #565e60;background:#fff;color:#565e60;font-weight:bold}
 
-#bo_gall .gall_li {float:left;padding:0 1em 2em 0}
+#bo_gall .gall_li {float:left;padding:0 10px 20px 0}
 #bo_gall .gall_clear {clear:both}
 
 #bo_gall .gall_con {margin:0;padding:0;list-style:none}

mobile/skin/board/gallery/view.skin.php

@@ -4,6 +4,7 @@ include_once(G5_LIB_PATH.'/thumbnail.lib.php');
 ?>
 
 <link rel="stylesheet" href="<?php echo $board_skin_url ?>/style.css">
+<script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script>
 
 <div id="bo_v_table"><?php echo $board['bo_subject']; ?></div>
 
@@ -226,6 +227,9 @@ $(function() {
         excute_good(this.href, $(this), $tx);
         return false;
     });
+
+    // 이미지 리사이즈
+    $("#bo_v_atc").viewimageresize();
 });
 
 function excute_good(href, $el, $tx)

skin/board/basic/view.skin.php

@@ -4,6 +4,7 @@ include_once(G5_LIB_PATH.'/thumbnail.lib.php');
 ?>
 
 <link rel="stylesheet" href="<?php echo $board_skin_url ?>/style.css">
+<script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script>
 
 <!-- 게시물 읽기 시작 { -->
 <div id="bo_v_table"><?php echo $board['bo_subject']; ?></div>
@@ -221,40 +222,6 @@ function board_move(href)
 </script>
 
 <script>
-// 이미지 등비율 리사이징
-$(window).load(function() {
-    view_image_resize();
-});
-
-var now = new Date();
-var timeout = false;
-var millisec = 200;
-var tid;
-
-$(window).resize(function() {
-    now = new Date();
-    if (timeout === false) {
-        timeout = true;
-
-        if(tid != null)
-            clearTimeout(tid);
-
-        tid = setTimeout(resize_check, millisec);
-    }
-});
-
-function resize_check() {
-    if (new Date() - now < millisec) {
-        if(tid != null)
-            clearTimeout(tid);
-
-        tid = setTimeout(resize_check, millisec);
-    } else {
-        timeout = false;
-        view_image_resize();
-    }
-}
-
 $(function() {
     $("a.view_image").click(function() {
         window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
@@ -272,44 +239,11 @@ $(function() {
         excute_good(this.href, $(this), $tx);
         return false;
     });
+
+    // 이미지 리사이즈
+    $("#bo_v_atc").viewimageresize();
 });
 
-function view_image_resize()
-{
-    var $img = $("#bo_v_atc img");
-    var img_wrap = $("#bo_v_atc").width();
-    var win_width = $(window).width() - 35;
-    var res_width = 0;
-
-    if(img_wrap < win_width)
-        res_width = img_wrap;
-    else
-        res_width = win_width;
-
-    $img.each(function() {
-        var img_width = $(this).width();
-        var img_height = $(this).height();
-        var this_width = $(this).data("width");
-        var this_height = $(this).data("height");
-
-        if(this_width == undefined) {
-            $(this).data("width", img_width); // 원래 이미지 사이즈
-            $(this).data("height", img_height);
-            this_width = img_width;
-            this_height = img_height;
-        }
-
-        if(this_width > res_width) {
-            $(this).width(res_width);
-            var res_height = Math.round(res_width * $(this).data("height") / $(this).data("width"));
-            $(this).height(res_height);
-        } else {
-            $(this).width(this_width);
-            $(this).height(this_height);
-        }
-    });
-}
-
 function excute_good(href, $el, $tx)
 {
     $.post(

skin/board/gallery/view.skin.php

@@ -4,6 +4,7 @@ include_once(G5_LIB_PATH.'/thumbnail.lib.php');
 ?>
 
 <link rel="stylesheet" href="<?php echo $board_skin_url ?>/style.css">
+<script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script>
 
 <!-- 게시물 읽기 시작 { -->
 <div id="bo_v_table"><?php echo $board['bo_subject']; ?></div>
@@ -221,40 +222,6 @@ function board_move(href)
 </script>
 
 <script>
-// 이미지 등비율 리사이징
-$(window).load(function() {
-    view_image_resize();
-});
-
-var now = new Date();
-var timeout = false;
-var millisec = 200;
-var tid;
-
-$(window).resize(function() {
-    now = new Date();
-    if (timeout === false) {
-        timeout = true;
-
-        if(tid != null)
-            clearTimeout(tid);
-
-        tid = setTimeout(resize_check, millisec);
-    }
-});
-
-function resize_check() {
-    if (new Date() - now < millisec) {
-        if(tid != null)
-            clearTimeout(tid);
-
-        tid = setTimeout(resize_check, millisec);
-    } else {
-        timeout = false;
-        view_image_resize();
-    }
-}
-
 $(function() {
     $("a.view_image").click(function() {
         window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
@@ -272,44 +239,11 @@ $(function() {
         excute_good(this.href, $(this), $tx);
         return false;
     });
+
+    // 이미지 리사이즈
+    $("#bo_v_atc").viewimageresize();
 });
 
-function view_image_resize()
-{
-    var $img = $("#bo_v_atc img");
-    var img_wrap = $("#bo_v_atc").width();
-    var win_width = $(window).width() - 35;
-    var res_width = 0;
-
-    if(img_wrap < win_width)
-        res_width = img_wrap;
-    else
-        res_width = win_width;
-
-    $img.each(function() {
-        var img_width = $(this).width();
-        var img_height = $(this).height();
-        var this_width = $(this).data("width");
-        var this_height = $(this).data("height");
-
-        if(this_width == undefined) {
-            $(this).data("width", img_width); // 원래 이미지 사이즈
-            $(this).data("height", img_height);
-            this_width = img_width;
-            this_height = img_height;
-        }
-
-        if(this_width > res_width) {
-            $(this).width(res_width);
-            var res_height = Math.round(res_width * $(this).data("height") / $(this).data("width"));
-            $(this).height(res_height);
-        } else {
-            $(this).width(this_width);
-            $(this).height(this_height);
-        }
-    });
-}
-
 function excute_good(href, $el, $tx)
 {
     $.post(