매인 배너 스킨화 작업 중

lib/shop.lib.php

@@ -1117,11 +1117,17 @@ function display_banner($position, $skin='')
     if (!$position) $position = '왼쪽';
     if (!$skin) $skin = 'boxbanner.skin.php';
 
-    // 배너 출력
+    $skin_path = G5_SHOP_SKIN_PATH.'/'.$skin;
-    $sql = " select * from {$g5['g5_shop_banner_table']} where '".G5_TIME_YMDHIS."' between bn_begin_time and bn_end_time and bn_position = '$position' order by bn_order, bn_id desc ";
-    $result = sql_query($sql);
 
-    include G5_SHOP_SKIN_PATH.'/boxbanner'.$num.'.skin.php';
+    if(file_exists($skin_path)) {
+        // 배너 출력
+        $sql = " select * from {$g5['g5_shop_banner_table']} where '".G5_TIME_YMDHIS."' between bn_begin_time and bn_end_time and bn_position = '$position' order by bn_order, bn_id desc ";
+        $result = sql_query($sql);
+
+        include $skin_path;
+    } else {
+        echo '<p>'.str_replace(G5_PATH.'/', '', $skin_path).'파일이 존재하지 않습니다.</p>';
+    }
 }
 
 

skin/shop/basic/mainbanner.10.skin.php

@@ -6,9 +6,12 @@ add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_SKIN_URL.'/style.css">',
 ?>
 
 <?php
+$max_width = $max_height = 0;
+$bn_first_class = ' class="sbn_first"';
+
 for ($i=0; $row=sql_fetch_array($result); $i++)
 {
-    if ($i==0) echo '<section id="sbn_idx" class="sbn"><h2>쇼핑몰 배너</h2><ul>'.PHP_EOL;
+    if ($i==0) echo '<section id="sbn_idx" class="sbn">'.PHP_EOL.'<h2>쇼핑몰 배너</h2>'.PHP_EOL.'<ul>'.PHP_EOL;
     //print_r2($row);
     // 테두리 있는지
     $bn_border  = ($row['bn_border']) ? ' sbn_border' : '';;
@@ -19,17 +22,213 @@ for ($i=0; $row=sql_fetch_array($result); $i++)
     if (file_exists($bimg))
     {
         $size = getimagesize($bimg);
-        echo '<li>'.PHP_EOL;
+
+        if($size[2] < 1 || $size[2] > 16)
+            continue;
+
+        if($max_width < $size[0])
+            $max_width = $size[0];
+
+        if($max_height < $size[1])
+            $max_height = $size[1];
+
+        echo '<li'.$bn_first_class.'>'.PHP_EOL;
         if ($row['bn_url'][0] == '#')
             echo '<a href="'.$row['bn_url'].'">';
         else if ($row['bn_url'] && $row['bn_url'] != 'http://') {
             echo '<a href="'.G5_SHOP_URL.'/bannerhit.php?bn_id='.$row['bn_id'].'&amp;url='.urlencode($row['bn_url']).'"'.$bn_new_win.'>';
         }
-        echo '<img src="'.G5_DATA_URL.'/banner/'.$row['bn_id'].'" alt="'.$row['bn_alt'].'" width="'.$size[0].'" height="'.$size[1].'" class="'.$bn_border.'">';
+        echo '<img src="'.G5_DATA_URL.'/banner/'.$row['bn_id'].'" alt="'.$row['bn_alt'].'" class="'.$bn_border.'">';
         if($row['bn_url'])
             echo '</a>'.PHP_EOL;
         echo '</li>'.PHP_EOL;
+
+        $bn_first_class = '';
     }
 }
-if ($i>0) echo '</ul></section>'.PHP_EOL;
+if ($i>0) echo '</ul>'.PHP_EOL.'</section>'.PHP_EOL;
-?>
+?>
+
+<script>
+(function($) {
+    var intervals = {};
+
+    var methods = {
+        init: function(option)
+        {
+            if(this.length < 1)
+                return false;
+
+            var $bnnr = this.find("li:has(img)");
+            var count = $bnnr.size();
+            var $bnnr_a = $bnnr.find("a");
+            var width = <?php echo $max_width; ?>;
+            var height = <?php echo $max_height; ?>;
+            var wrap_width = this.parent().width();
+            var c_idx = o_idx = 0;
+            var el_id = this[0].id;
+            var $this = this;
+
+            if(width > wrap_width) {
+                height = parseInt(height * (wrap_width / width));
+            }
+            width = wrap_width;
+
+            this.width(wrap_width).height(height)
+                .find("ul").width(width).height(height)
+                .find("li").width(width).height(height);
+
+            $bnnr.not(".sbn_first").css("left", width+"px");
+
+            // 기본 설정값
+            var settings = $.extend({
+                interval: 5000,
+                duration: 1500
+            }, option);
+
+            if(count > 1) {
+                var slide_button = "<button type=\"button\" id=\"sbn_btn_prev\" class=\"sbn_btn_slide\">이전</button>\n";
+                slide_button += "<button type=\"button\" id=\"sbn_btn_next\" class=\"sbn_btn_slide\">다음</button>";
+
+                this.find("ul").before(slide_button);
+
+                var $bnnr_btn = this.find(".sbn_btn_slide");
+            }
+
+            set_interval();
+
+            $(".sbn_btn_slide").on("click", function() {
+                if($this.find(":animated").size() > 0)
+                    return false;
+
+                clear_interval();
+
+                var id = $(this).attr("id");
+                if(id.search("prev") > -1) {
+                    right_rolling();
+                } else {
+                    left_rolling();
+                }
+            });
+
+            $bnnr.hover(
+                function() {
+                    clear_interval();
+                },
+                function() {
+                    set_interval();
+                }
+            );
+
+            $bnnr_a.on("focusin", function() {
+                clear_interval();
+            });
+
+            $bnnr_a.on("focusout", function() {
+                set_interval();
+            });
+
+            $bnnr_btn.on("focusin", function() {
+                clear_interval();
+            });
+
+            $bnnr_btn.on("focusout", function() {
+                set_interval();
+            });
+
+            function left_rolling() {
+                $bnnr.each(function(index) {
+                    if($(this).is(":visible")) {
+                        o_idx = index;
+                        return false;
+                    }
+                });
+
+                $bnnr.not(":visible").css({
+                    display: "none",
+                    left: "+"+width+"px"
+                });
+
+                $bnnr.eq(o_idx).animate(
+                    { left: "-="+width+"px" }, settings.duration,
+                    function() {
+                        $(this).css("display", "none").css("left", width+"px");
+                    }
+                );
+
+                c_idx = (o_idx + 1) % count;
+
+                $bnnr.eq(c_idx).css("display", "block").animate(
+                    { left: "-="+width+"px" }, settings.duration,
+                    function() {
+                        o_idx = c_idx;
+                    }
+                );
+            }
+
+            function right_rolling() {
+                $bnnr.each(function(index) {
+                    if($(this).is(":visible")) {
+                        o_idx = index;
+                        return false;
+                    }
+                });
+
+                $bnnr.not(":visible").css({
+                    display: "none",
+                    left: "-"+width+"px"
+                });
+
+                $bnnr.eq(o_idx).animate(
+                    { left: "+="+width+"px" }, settings.duration,
+                    function() {
+                        $(this).css("display", "none").css("left", "-"+width+"px");
+                    }
+                );
+
+                c_idx = (o_idx + 1) % count;
+
+                $bnnr.eq(c_idx).css("display", "block").animate(
+                    { left: "+="+width+"px" }, settings.duration,
+                    function() {
+                        o_idx = c_idx;
+                    }
+                );
+            }
+
+            function set_interval() {
+                if(count > 1) {
+                    clear_interval();
+
+                    intervals[el_id] = setInterval(left_rolling, settings.interval);
+                }
+            }
+
+            function clear_interval() {
+                if(intervals[el_id]) {
+                    clearInterval(intervals[el_id]);
+                }
+            }
+        },
+        stop: function()
+        {
+            var el_id = this[0].id;
+            if(intervals[el_id])
+                clearInterval(intervals[el_id]);
+        }
+    };
+
+    $.fn.bannerRolling = function(option) {
+        if (methods[option])
+            return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
+        else
+            return methods.init.apply(this, arguments);
+    }
+}(jQuery));
+
+$(function() {
+    $("#sbn_idx").bannerRolling();
+    // 기본 설정값을 변경하려면 아래처럼 사용
+    //$("#sbn_idx").leftRolling({ interval: 6000, duration: 2000 });
+});
+</script>

skin/shop/basic/style.css

@@ -58,6 +58,13 @@
 .sbn li {margin:0 0 1px}
 .sbn .sbn_border {border:1px solid #d5d5d5} /* 인덱스 배너도 함께 사용 */
 
+#sbn_idx ul {position:relative;overflow:hidden}
+#sbn_idx ul li {position:absolute;display:none;top:0;left:0}
+#sbn_idx ul li.sbn_first{display:block}
+#sbn_idx button {position:absolute;top:100px;z-index:100}
+#sbn_idx #sbn_btn_prev{left:50px}
+#sbn_idx #sbn_btn_next{right:50px}
+
 /* aside:장바구니 */
 #sbsk {margin:0 0 5px;padding:0 0 10px;border:1px solid #d5d5d5;background:#f2f5f9}
 #sbsk h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}