firstgarden/firstgarden-web-gnu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

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

Browse Source
This commit is contained in:
chicpro
2013-08-09 16:28:22 +09:00
parent 910ef67bc6
commit 5ff1899796
4 changed files with 447 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
skin/shop/basic/main.20.skin.php
View File

@ -10,11 +10,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
<link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
<!-- 이전 재생 정지 다음 버튼 시작 { -->
<ul class="sctrl">
<li><button type="button" class="sctrl_prev">이전<span></span></button></li>
<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
<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,83 +91,131 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
?>
<script>
$.fn.topRolling = function(option)
{
var $smt = this.find("ul.sct_ul");
var $smt_a = $smt.find("a.sct_a");
var height = $smt.closest("ul").height();
var count = $smt.size();
var c_idx = o_idx = 0;
var fx = null;
(function($) {
var intervals = {};
// 기본 설정값
var settings = $.extend({
interval: 5000,
duration: 800
}, option);
var methods = {
init: function(option)
{
var $smt = this.find("ul.sct_ul");
var $smt_a = $smt.find("a.sct_a");
var height = $smt.closest("ul").height();
var count = $smt.size();
var c_idx = o_idx = 0;
var fx = null;
var el_id = this[0].id;
if(count < 2)
return;
// 기본 설정값
var settings = $.extend({
interval: 5000,
duration: 800
}, option);
fx = setInterval(top_rolling, settings.interval);
if(count < 2)
return;
$smt.hover(
function() {
if(fx != null)
clearInterval(fx);
set_interval();
$smt.hover(
function() {
clear_interval();
},
function() {
set_interval();
}
);
$smt_a.on("focusin", function() {
clear_interval();
});
$smt_a.on("focusout", function() {
set_interval();
});
function top_rolling() {
$smt.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
}
});
$smt.eq(o_idx).animate(
{ top: "-="+height+"px" }, settings.duration,
function() {
$(this).css("display", "none").css("top", height+"px");
}
);
c_idx = (o_idx + 1) % count;
$smt.eq(c_idx).css("display", "block").animate(
{ top: "-="+height+"px" }, settings.duration,
function() {
o_idx = c_idx;
}
);
}
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>");
}
}
},
function() {
if(fx != null)
clearInterval(fx);
if(count > 1)
fx = setInterval(top_rolling, settings.interval);
stop: function()
{
var el_id = this[0].id;
if(intervals[el_id])
clearInterval(intervals[el_id]);
}
);
};
$smt_a.on("focusin", function() {
if(fx != null)
clearInterval(fx);
});
$smt_a.on("focusout", function() {
if(fx != null)
clearInterval(fx);
if(count > 1)
fx = setInterval(top_rolling, settings.interval);
});
function top_rolling() {
$smt.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
}
});
$smt.eq(o_idx).animate(
{ top: "-="+height+"px" }, settings.duration,
function() {
$(this).css("display", "none").css("top", height+"px");
}
);
c_idx = (o_idx + 1) % count;
$smt.eq(c_idx).css("display", "block").animate(
{ top: "-="+height+"px" }, settings.duration,
function() {
o_idx = c_idx;
}
);
$.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 끝 -->

183
skin/shop/basic/main.30.skin.php
View File

@ -10,11 +10,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
<link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
<!-- 이전 재생 정지 다음 버튼 시작 { -->
<ul class="sctrl">
<li><button type="button" class="sctrl_prev">이전<span></span></button></li>
<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
<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,86 +87,131 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
?>
<script>
$.fn.leftRolling = function(option)
{
var $smt = this.find("ul.sct_ul");
var $smt_a = $smt.find("a.sct_a");
var width = $smt.eq(0).width();
var count = $smt.size();
var c_idx = smt_o_idx = 0;
var fx = null;
(function($) {
var intervals = {};
// 기본 설정값
var settings = $.extend({
interval: 7000,
duration: 1500
}, option);
var methods = {
init: function(option)
{
var $smt = this.find("ul.sct_ul");
var $smt_a = $smt.find("a.sct_a");
var width = $smt.eq(0).width();
var count = $smt.size();
var c_idx = smt_o_idx = 0;
var fx = null;
var el_id = this[0].id;
if(count < 2)
return;
// 기본 설정값
var settings = $.extend({
interval: 6000,
duration: 1500
}, option);
// $smt width 설정
$smt.width(width);
if(count < 2)
return;
fx = setInterval(left_rolling, settings.interval);
set_interval();
$smt.hover(
function() {
if(fx != null)
clearInterval(fx);
$smt.hover(
function() {
clear_interval();
},
function() {
set_interval();
}
);
$smt_a.on("focusin", function() {
clear_interval();
});
$smt_a.on("focusout", function() {
set_interval();
});
function left_rolling() {
$smt.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
}
});
$smt.eq(o_idx).animate(
{ left: "-="+width+"px" }, settings.duration,
function() {
$(this).css("display", "none").css("left", width+"px");
}
);
c_idx = (o_idx + 1) % count;
$smt.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);
// 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>");
}
}
},
function() {
if(fx != null)
clearInterval(fx);
if(count > 1)
fx = setInterval(left_rolling, settings.interval);
stop: function()
{
var el_id = this[0].id;
if(intervals[el_id])
clearInterval(intervals[el_id]);
}
);
};
$smt_a.on("focusin", function() {
if(smt_interval != null)
clearInterval(smt_interval);
});
$smt_a.on("focusout", function() {
if(fx != null)
clearInterval(fx);
if(count > 1)
fx = setInterval(left_rolling, settings.interval);
});
function left_rolling() {
$smt.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
}
});
$smt.eq(o_idx).animate(
{ left: "-="+width+"px" }, settings.duration,
function() {
$(this).css("display", "none").css("left", width+"px");
}
);
c_idx = (o_idx + 1) % count;
$smt.eq(c_idx).css("display", "block").animate(
{ left: "-="+width+"px" }, settings.duration,
function() {
o_idx = c_idx;
}
);
$.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 끝 -->

148
skin/shop/basic/main.40.skin.php
View File

@ -10,11 +10,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
<link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
<!-- 이전 재생 정지 다음 버튼 시작 { -->
<ul class="sctrl">
<li><button type="button" class="sctrl_prev">이전<span></span></button></li>
<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
<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,70 +91,118 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
?>
<script>
$.fn.itemlistShow = 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;
(function($) {
var intervals = {};
// 기본 설정값
var settings = $.extend({
interval: 3000
}, option);
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;
if(count < 2)
return;
// 기본 설정값
var settings = $.extend({
interval: 4000
}, option);
fx = setInterval(itemlist_show, settings.interval);
if(count < 2)
return;
$smt.hover(
function() {
if(fx != null)
clearInterval(fx);
},
function() {
if(fx != null)
clearInterval(fx);
set_interval();
if(count > 1)
fx = setInterval(itemlist_show, settings.interval);
}
);
$smt.hover(
function() {
clear_interval();
},
function() {
set_interval();
}
);
$smt_a.on("focusin", function() {
if(fx != null)
clearInterval(fx);
});
$smt_a.on("focusin", function() {
clear_interval();
});
$smt_a.on("focusout", function() {
if(fx != null)
clearInterval(fx);
$smt_a.on("focusout", function() {
set_interval();
});
if(count > 1)
fx = setInterval(itemlist_show, settings.interval);
});
function itemlist_show() {
$smt.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
}
});
function itemlist_show() {
$smt.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
$smt.eq(o_idx).css("display", "none");
c_idx = (o_idx + 1) % count;
$smt.eq(c_idx).css("display", "block");
o_idx = c_idx;
}
});
$smt.eq(o_idx).css("display", "none");
c_idx = (o_idx + 1) % count;
$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 끝 -->

200
skin/shop/basic/main.50.skin.php
View File

@ -9,11 +9,9 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
<link rel="stylesheet" href="<?php echo G4_SHOP_SKIN_URL; ?>/style.css">
<!-- 이전 재생 정지 다음 버튼 시작 { -->
<ul class="sctrl">
<li><button type="button" class="sctrl_prev">이전<span></span></button></li>
<ul id="btn_smt_<?php echo $this->type; ?>" class="sctrl">
<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,95 +90,143 @@ if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
?>
<script>
$.fn.itemDrop = function(option)
{
var $smt = this.find("ul.sct_ul");
var $smt_a = $smt.find("a.sct_a");
var count = $smt.size();
var height = $smt.height();
var c_idx = o_idx = 0;
var fx = null;
var delay = 0;
(function() {
var intervals = {};
// 기본 설정값
var settings = $.extend({
interval: 6000,
duration: 800,
delay: 300
}, option);
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 height = $smt.height();
var c_idx = o_idx = 0;
var fx = null;
var delay = 0;
var el_id = this[0].id;
// 초기실행
if(count > 0) {
$smt.eq(0).find("li.sct_li").each(function() {
$(this).delay(delay).animate(
{ top: "+="+height+"px" }, settings.duration
);
// 기본 설정값
var settings = $.extend({
interval: 6000,
duration: 800,
delay: 300
}, option);
delay += settings.delay;
});
}
// 초기실행
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
);
if(count > 1)
fx = setInterval(item_drop, settings.interval);
$smt.hover(
function() {
if(fx != null)
clearInterval(fx);
},
function() {
if(fx != null)
clearInterval(fx);
if(count > 1)
fx = setInterval(item_drop, settings.interval);
}
);
$smt_a.on("focusin", function() {
if(fx != null)
clearInterval(fx);
});
$smt_a.on("focusout", function() {
if(fx != null)
clearInterval(fx);
if(count > 1)
fx = setInterval(item_drop, settings.interval);
});
function item_drop() {
$smt.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
delay += settings.delay;
});
}
});
delay = 0;
set_interval();
$smt.eq(o_idx).css("display", "none");
$smt.eq(o_idx).find("li.sct_li").css("top", "-"+height+"px");
c_idx = (o_idx + 1) % count;
$smt.eq(c_idx).css("display", "block");
$smt.eq(c_idx).find("li.sct_li").each(function() {
$(this).delay(delay).animate(
{ top: "+="+height+"px" }, settings.duration
$smt.hover(
function() {
clear_interval();
},
function() {
set_interval();
}
);
delay += settings.delay;
});
$smt_a.on("focusin", function() {
clear_interval();
});
o_idx = c_idx;
$smt_a.on("focusout", function() {
set_interval();
});
function item_drop() {
$smt.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
}
});
delay = 0;
$smt.eq(o_idx).css("display", "none");
$smt.eq(o_idx).find("li.sct_li").css("top", "-"+height+"px");
c_idx = (o_idx + 1) % count;
$smt.eq(c_idx).css("display", "block");
$smt.eq(c_idx).find("li.sct_li").each(function() {
$(this).delay(delay).animate(
{ top: "+="+height+"px" }, settings.duration
);
delay += settings.delay;
});
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 끝 -->