메인상품 진열 main.20.skin.php 에서
본문
영카트5 메인상품 진열 스킨인 main.20.skin.php 에서 보면
상품이 위로 롤링이 되는데..
아래방향으로 롤링되게 하려고 하면 js 에서 어디를 수정하면 될런지요?
(function($) {
var intervals = {};
var methods = {
init: function(option)
{
if(this.length < 1)
return false;
var $smt = this.find("ul.sct_ul");
var $smt_a = $smt.find("a");
var height = 0;
var count = $smt.size();
var c_idx = o_idx = 0;
var fx = null;
var el_id = this[0].id;
$smt.each(function() {
var h = $(this).outerHeight(true);
if(h > height)
height = h;
});
$smt.each(function(index) {
if($(this).is(":visible")) {
o_idx = index;
return false;
}
});
this.height(height);
$smt.eq(o_idx).siblings().css("top", height+"px");
// 기본 설정값
var settings = $.extend({
interval: 5000,
duration: 800
}, option);
if(count < 2)
return;
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();
if($("#btn_"+el_id).find("button.sctrl_stop").data("stop") == true)
return;
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: 2000, duration: 800 });
// 애니메이션 play
$("#btn_smt_<?php echo $this->type; ?> button.sctrl_play").on("click", function() {
$("#btn_smt_<?php echo $this->type; ?> button.sctrl_stop").data("stop", false);
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");
$(this).data("stop", true);
}
});
});