애니메이션 스킨에 재생 정지 기능 추가

skin/shop/basic/main.20.skin.php

@@ -10,11 +10,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 <link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
 
 <!-- 이전 재생 정지 다음 버튼 시작 { -->
-<ul class="sctrl">
+<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
-    <li><button type="button" class="sctrl_prev">이전<span></span></button></li>
     <li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
     <li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
-    <li><button type="button" class="sctrl_next">다음<span></span></button></li>
 </ul>
 <!-- } 이전 재생 정지 다음 버튼 끝 -->
 
@@ -93,7 +91,11 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 ?>
 
 <script>
-$.fn.topRolling = function(option)
+(function($) {
+    var intervals = {};
+
+    var methods = {
+        init: function(option)
         {
             var $smt = this.find("ul.sct_ul");
             var $smt_a = $smt.find("a.sct_a");
@@ -101,6 +103,7 @@ $.fn.topRolling = function(option)
             var count = $smt.size();
             var c_idx = o_idx = 0;
             var fx = null;
+            var el_id = this[0].id;
 
             // 기본 설정값
             var settings = $.extend({
@@ -111,33 +114,23 @@ $.fn.topRolling = function(option)
             if(count < 2)
                 return;
 
-    fx = setInterval(top_rolling, settings.interval);
+            set_interval();
 
             $smt.hover(
                 function() {
-            if(fx != null)
+                    clear_interval();
-                clearInterval(fx);
                 },
                 function() {
-            if(fx != null)
+                    set_interval();
-                clearInterval(fx);
-
-            if(count > 1)
-                fx = setInterval(top_rolling, settings.interval);
                 }
             );
 
             $smt_a.on("focusin", function() {
-        if(fx != null)
+                clear_interval();
-            clearInterval(fx);
             });
 
             $smt_a.on("focusout", function() {
-        if(fx != null)
+                set_interval();
-            clearInterval(fx);
-
-        if(count > 1)
-            fx = setInterval(top_rolling, settings.interval);
             });
 
             function top_rolling() {
@@ -164,12 +157,65 @@ $.fn.topRolling = function(option)
                     }
                 );
             }
+
+            function set_interval() {
+                if(count > 1) {
+                    clear_interval();
+                    intervals[el_id] = setInterval(top_rolling, settings.interval);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_play span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
                 }
+            }
+
+            function clear_interval() {
+                if(intervals[el_id]) {
+                    clearInterval(intervals[el_id]);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_stop span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
+        },
+        stop: function()
+        {
+            var el_id = this[0].id;
+            if(intervals[el_id])
+                clearInterval(intervals[el_id]);
+        }
+    };
+
+    $.fn.topRolling = 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() {
     $("#smt_<?php echo $this->type; ?>").topRolling();
     // 기본 설정값을 변경하려면 아래처럼 사용
-    //$("#smt_<?php echo $this->type; ?>").topRolling({ interval: 5000, duration: 800 });
+    //$("#smt_<?php echo $this->type; ?>").topRolling({ interval: 2000, duration: 800 });
+
+    // 애니메이션 play
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_play").on("click", function() {
+        var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+        $("#"+id).topRolling();
+        //$("#"+id).topRolling({ interval: 2000, duration: 800 });
+    });
+
+    // 애니메이션 stop
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_stop").on("click", function() {
+        if($(this).parent().siblings().find(".sctrl_on").size() > 0) {
+            $(this).parent().siblings().find("span").removeClass("sctrl_on").html("");
+            $(this).children().addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+            var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+            $("#"+id).topRolling("stop");
+        }
+    });
 });
 </script>
 <!-- } 상품진열 20 끝 -->

skin/shop/basic/main.30.skin.php

@@ -10,11 +10,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 <link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
 
 <!-- 이전 재생 정지 다음 버튼 시작 { -->
-<ul class="sctrl">
+<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
-    <li><button type="button" class="sctrl_prev">이전<span></span></button></li>
     <li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
     <li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
-    <li><button type="button" class="sctrl_next">다음<span></span></button></li>
 </ul>
 <!-- } 이전 재생 정지 다음 버튼 끝 -->
 
@@ -89,7 +87,11 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 ?>
 
 <script>
-$.fn.leftRolling = function(option)
+(function($) {
+    var intervals = {};
+
+    var methods = {
+        init: function(option)
         {
             var $smt = this.find("ul.sct_ul");
             var $smt_a = $smt.find("a.sct_a");
@@ -97,46 +99,34 @@ $.fn.leftRolling = function(option)
             var count = $smt.size();
             var c_idx = smt_o_idx = 0;
             var fx = null;
+            var el_id = this[0].id;
 
             // 기본 설정값
             var settings = $.extend({
-        interval: 7000,
+                interval: 6000,
                 duration: 1500
             }, option);
 
             if(count < 2)
                 return;
 
-    // $smt width 설정
+            set_interval();
-    $smt.width(width);
-
-    fx = setInterval(left_rolling, settings.interval);
 
             $smt.hover(
                 function() {
-            if(fx != null)
+                    clear_interval();
-                clearInterval(fx);
                 },
                 function() {
-            if(fx != null)
+                    set_interval();
-                clearInterval(fx);
-
-            if(count > 1)
-                fx = setInterval(left_rolling, settings.interval);
                 }
             );
 
             $smt_a.on("focusin", function() {
-        if(smt_interval != null)
+                clear_interval();
-            clearInterval(smt_interval);
             });
 
             $smt_a.on("focusout", function() {
-        if(fx != null)
+                set_interval();
-            clearInterval(fx);
-
-        if(count > 1)
-            fx = setInterval(left_rolling, settings.interval);
             });
 
             function left_rolling() {
@@ -163,12 +153,65 @@ $.fn.leftRolling = function(option)
                     }
                 );
             }
+
+            function set_interval() {
+                if(count > 1) {
+                    clear_interval();
+                    intervals[el_id] = setInterval(left_rolling, settings.interval);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_play span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
                 }
+            }
+
+            function clear_interval() {
+                if(intervals[el_id]) {
+                    clearInterval(intervals[el_id]);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_stop span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
+        },
+        stop: function()
+        {
+            var el_id = this[0].id;
+            if(intervals[el_id])
+                clearInterval(intervals[el_id]);
+        }
+    };
+
+    $.fn.leftRolling = 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() {
     $("#smt_<?php echo $this->type; ?>").leftRolling();
     // 기본 설정값을 변경하려면 아래처럼 사용
-    //$("#smt_<?php echo $this->type; ?>").leftRolling({ interval: 7000, duration: 1500 });
+    //$("#smt_<?php echo $this->type; ?>").leftRolling({ interval: 6000, duration: 1500 });
+
+    // 애니메이션 play
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_play").on("click", function() {
+        var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+        $("#"+id).leftRolling();
+        //$("#"+id).leftRolling({ interval: 6000, duration: 1500 });
+    });
+
+    // 애니메이션 stop
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_stop").on("click", function() {
+        if($(this).parent().siblings().find(".sctrl_on").size() > 0) {
+            $(this).parent().siblings().find("span").removeClass("sctrl_on").html("");
+            $(this).children().addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+            var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+            $("#"+id).leftRolling("stop");
+        }
+    });
 });
 </script>
 <!-- } 상품진열 30 끝 -->

skin/shop/basic/main.40.skin.php

@@ -10,11 +10,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 <link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
 
 <!-- 이전 재생 정지 다음 버튼 시작 { -->
-<ul class="sctrl">
+<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
-    <li><button type="button" class="sctrl_prev">이전<span></span></button></li>
     <li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
     <li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
-    <li><button type="button" class="sctrl_next">다음<span></span></button></li>
 </ul>
 <!-- } 이전 재생 정지 다음 버튼 끝 -->
 
@@ -93,49 +91,44 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 ?>
 
 <script>
-$.fn.itemlistShow = function(option)
+(function($) {
+    var intervals = {};
+
+    var methods = {
+        init: function(option)
         {
             var $smt = this.find("ul.sct_ul");
             var $smt_a = $smt.find("a.sct_a");
             var count = $smt.size();
             var c_idx = o_idx = 0;
             var fx = null;
+            var el_id = this[0].id;
 
             // 기본 설정값
             var settings = $.extend({
-        interval: 3000
+                interval: 4000
             }, option);
 
             if(count < 2)
                 return;
 
-    fx = setInterval(itemlist_show, settings.interval);
+            set_interval();
 
             $smt.hover(
                 function() {
-            if(fx != null)
+                    clear_interval();
-                clearInterval(fx);
                 },
                 function() {
-            if(fx != null)
+                    set_interval();
-                clearInterval(fx);
-
-            if(count > 1)
-                fx = setInterval(itemlist_show, settings.interval);
                 }
             );
 
             $smt_a.on("focusin", function() {
-        if(fx != null)
+                clear_interval();
-            clearInterval(fx);
             });
 
             $smt_a.on("focusout", function() {
-        if(fx != null)
+                set_interval();
-            clearInterval(fx);
-
-        if(count > 1)
-            fx = setInterval(itemlist_show, settings.interval);
             });
 
             function itemlist_show() {
@@ -151,12 +144,65 @@ $.fn.itemlistShow = function(option)
                 $smt.eq(c_idx).css("display", "block");
                 o_idx = c_idx;
             }
+
+            function set_interval() {
+                if(count > 1) {
+                    clear_interval();
+                    intervals[el_id] = setInterval(itemlist_show, settings.interval);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_play span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
                 }
+            }
+
+            function clear_interval() {
+                if(intervals[el_id]) {
+                    clearInterval(intervals[el_id]);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_stop span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
+        },
+        stop: function()
+        {
+            var el_id = this[0].id;
+            if(intervals[el_id])
+                clearInterval(intervals[el_id]);
+        }
+    };
+
+    $.fn.itemlistShow = 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() {
     $("#smt_<?php echo $this->type; ?>").itemlistShow();
     // 기본 설정값을 변경하려면 아래처럼 사용
-    //$("#smt_<?php echo $this->type; ?>").itemlistShow({ interval: 3000 });
+    //$("#smt_<?php echo $this->type; ?>").itemlistShow({ interval: 4000 });
+
+    // 애니메이션 play
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_play").on("click", function() {
+        var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+        $("#"+id).itemlistShow();
+        //$("#"+id).itemlistShow({ interval: 4000 });
+    });
+
+    // 애니메이션 stop
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_stop").on("click", function() {
+        if($(this).parent().siblings().find(".sctrl_on").size() > 0) {
+            $(this).parent().siblings().find("span").removeClass("sctrl_on").html("");
+            $(this).children().addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+            var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+            $("#"+id).itemlistShow("stop");
+        }
+    });
 });
 </script>
 <!-- } 상품진열 40 끝 -->

skin/shop/basic/main.50.skin.php

@@ -9,11 +9,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 <link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
 
 <!-- 이전 재생 정지 다음 버튼 시작 { -->
-<ul class="sctrl">
+<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
-    <li><button type="button" class="sctrl_prev">이전<span></span></button></li>
     <li><button type="button" class="sctrl_play">효과재생<span></span></button></li>
     <li><button type="button" class="sctrl_stop">효과정지<span></span></button></li>
-    <li><button type="button" class="sctrl_next">다음<span></span></button></li>
 </ul>
 <!-- } 이전 재생 정지 다음 버튼 끝 -->
 
@@ -92,7 +90,11 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 ?>
 
 <script>
-$.fn.itemDrop = function(option)
+(function() {
+    var intervals = {};
+
+    var methods = {
+        init: function(option)
         {
             var $smt = this.find("ul.sct_ul");
             var $smt_a = $smt.find("a.sct_a");
@@ -101,6 +103,7 @@ $.fn.itemDrop = function(option)
             var c_idx = o_idx = 0;
             var fx = null;
             var delay = 0;
+            var el_id = this[0].id;
 
             // 기본 설정값
             var settings = $.extend({
@@ -110,7 +113,7 @@ $.fn.itemDrop = function(option)
             }, option);
 
             // 초기실행
-    if(count > 0) {
+            if(count > 0 && intervals[el_id] == undefined) {
                 $smt.eq(0).find("li.sct_li").each(function() {
                     $(this).delay(delay).animate(
                         { top: "+="+height+"px" }, settings.duration
@@ -120,34 +123,23 @@ $.fn.itemDrop = function(option)
                 });
             }
 
-    if(count > 1)
+            set_interval();
-        fx = setInterval(item_drop, settings.interval);
 
             $smt.hover(
                 function() {
-            if(fx != null)
+                    clear_interval();
-                clearInterval(fx);
                 },
                 function() {
-            if(fx != null)
+                    set_interval();
-                clearInterval(fx);
-
-            if(count > 1)
-                fx = setInterval(item_drop, settings.interval);
                 }
             );
 
             $smt_a.on("focusin", function() {
-        if(fx != null)
+                clear_interval();
-            clearInterval(fx);
             });
 
             $smt_a.on("focusout", function() {
-        if(fx != null)
+                set_interval();
-            clearInterval(fx);
-
-        if(count > 1)
-            fx = setInterval(item_drop, settings.interval);
             });
 
             function item_drop() {
@@ -176,11 +168,65 @@ $.fn.itemDrop = function(option)
 
                 o_idx = c_idx;
             }
+
+            function set_interval() {
+                if(count > 1) {
+                    clear_interval();
+                    intervals[el_id] = setInterval(item_drop, settings.interval);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_play span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
                 }
+            }
+
+            function clear_interval() {
+                if(intervals[el_id]) {
+                    clearInterval(intervals[el_id]);
+
+                    // control 버튼 class
+                    $("#btn_"+el_id).find("button span").removeClass("sctrl_on").html("")
+                        .end().find("button.sctrl_stop span").addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+                }
+            }
+        },
+        stop: function()
+        {
+            var el_id = this[0].id;
+            if(intervals[el_id])
+                clearInterval(intervals[el_id]);
+        }
+    };
+
+    $.fn.itemDrop = 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() {
     $("#smt_<?php echo $this->type; ?>").itemDrop();
     // 기본 설정값을 변경하려면 아래처럼 사용
     //$("#smt_<?php echo $this->type; ?>").itemDrop({ interval: 6000, duration: 800, delay: 300 });
+
+    // 애니메이션 play
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_play").on("click", function() {
+        var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+        $("#"+id).itemDrop();
+        //$("#"+id).itemDrop({ interval: 3000, duration: 800, delay: 300 });
+    });
+
+    // 애니메이션 stop
+    $("#btn_smt_<?php echo $this->type; ?> button.sctrl_stop").on("click", function() {
+        if($(this).parent().siblings().find(".sctrl_on").size() > 0) {
+            $(this).parent().siblings().find("span").removeClass("sctrl_on").html("");
+            $(this).children().addClass("sctrl_on").html("<b class=\"sound_only\">선택됨</b>");
+            var id = $(this).closest(".sctrl").attr("id").replace("btn_", "");
+            $("#"+id).itemDrop("stop");
+        }
+    });
 });
 </script>
 <!-- } 상품진열 50 끝 -->