/*
* jQuery Image rolling Plugin
* @author ddakker
* @date 2012-01-30
* ex)
*
![]()
*
![]()
* ...
*
*
*
*
*
*/
;(function($) {
/**
* 상하 이미지 롤링(추후 좌우 추가)
* @param viewCount 이미지 보여줄 갯수
* @param delay 이동 주기
* @param duration Effect 지속 시간
* @param btNextId Up,Left 이동 버튼
* @param btPrevId Down,Right 이동 버튼
* @param direction 이동방향
* @param autoRolling 자동 롤링
* @param callbackRollingFun 이미지 롤링 시 호출될 콜백 함수 ex) callbackRollingFun(direction, options.rollingEl, selectedIndex);
*/
$.fn.rolling = function(viewCount, delay, duration, btNextId, btPrevId, direction, bAutoRolling, callbackMoveFun) {
if( this.children().length == 0 ) return;
var clickArr = new Array();
var options = {};
var bEffectProgress = false;
var autoRollingTimer = null;
var clickedProcessTimer = null;
options.el = $(this);
options.viewCount = viewCount;
options.imgCount = options.el.children().length;
options.direction = (direction==undefined)?"DOWN":direction;
options.delay = delay;
options.duration = duration;
options.itemWidth = options.el.children().eq(0).width() + Number(options.el.children().eq(0).attr("border"))*2;
options.itemHeight = options.el.children().eq(0).height() + Number(options.el.children().eq(0).attr("border"))*2;
options.btNextId = btNextId;
options.btPrevId = btPrevId;
options.autoRolling = (bAutoRolling==undefined)?true:bAutoRolling;
options.callbackMoveFun = (callbackMoveFun==undefined)?null:callbackMoveFun;;
options.rollingEl = null;
options.el.children().each(function(){
if( $(this).attr("onclick") )
$(this).css("cursor", "pointer");
});
this.css("position", "relative");
this.css("overflow", "hidden");
if( options.direction == "UP" || options.direction == "DOWN" ){
this.css("width", options.itemWidth);
this.css("height", options.viewCount * options.itemHeight);
}else{
this.css("width", options.viewCount * options.itemWidth);
this.css("height", options.itemHeight);
}
options.el.children().wrapAll('');
options.rollingEl = options.el.children("div");
options.rollingEl.css("position", "absolute");
options.rollingEl.attr("align", "left");
options.rollingEl.css("left", "0");
options.rollingEl.css("top", "0");
if( options.direction == "UP" || options.direction == "DOWN" ){
options.rollingEl.css("height", this.height()*2);
}else{
options.rollingEl.css("width", this.width()*2);
}
options.rollingEl.children().each(function(i){
options.rollingEl.children().eq(i).attr("idx", i);
});
if( options.imgCount >= viewCount ){
$("#" + btPrevId).bind("click", function(){
if( options.direction == "UP" || options.direction == "DOWN" )
clickArrAdd("UP");
else
clickArrAdd("LEFT");
}).css("cursor", "pointer");
$("#" + btNextId).bind("click", function(){
if( options.direction == "UP" || options.direction == "DOWN" )
clickArrAdd("DOWN");
else
clickArrAdd("RIGHT");
}).css("cursor", "pointer");
if( options.autoRolling ){
autoRolling();
this.mouseover(function() {
stopRolling();
}).mouseout(function(){
autoRolling();
});
}
}
// 동작 추가 및 호출
function clickArrAdd(direction){
clickArr.push(direction);
stopRolling();
clickArrProcess();
}
// 동작 처리 호출
function clickArrProcess(){
if( clickedProcessTimer != null ) return;
clickedProcessTimer = setInterval(function(){
if( bEffectProgress == false && clickArr.length > 0 ){
move(clickArr.slice(0, 1), true);
clickArr = clickArr.slice(1);
}
}, 100);
}
function autoRolling(){
if( clickedProcessTimer ){
clearInterval(clickedProcessTimer);
clickedProcessTimer = null;
}
if( clickedProcessTimer != null ) return;
autoRollingTimer = setInterval(function(){
if( bEffectProgress == false ){
move(null, false);
}
}, options.delay);
}
function stopRolling(){
clearInterval(autoRollingTimer);
autoRollingTimer = null;
}
// 동작 처리
function move(direction, btClicked){
if( direction ) options.direction = direction;
var topMoveSize = 0;
var leftMoveSize = 0;
if( options.direction == "UP" || options.direction == "LEFT" ){
options.rollingEl.append(options.rollingEl.children().eq(0).clone());
if( options.direction == "UP" ){
topMoveSize = "-=" + options.itemHeight + "px";;
leftMoveSize = 0;
}else{
topMoveSize = 0;
leftMoveSize = "-=" + options.itemWidth + "px";;
}
}else if( options.direction == "DOWN" || options.direction == "RIGHT" ){
options.rollingEl.prepend(options.rollingEl.children().eq(options.rollingEl.children().length-1).clone());
if( options.direction == "DOWN" ){
options.rollingEl.css("top", (options.itemHeight*-1)+"px");
topMoveSize = "+=" + options.itemHeight + "px";;
leftMoveSize = 0;
}else{
options.rollingEl.css("left", (options.itemWidth*-1)+"px");
topMoveSize = 0;
leftMoveSize = "+=" + options.itemWidth + "px";;
}
}
bEffectProgress = true;
options.rollingEl.animate({
top: topMoveSize,
left: leftMoveSize
}, options.duration, function(){
if( options.direction == "UP" || options.direction == "LEFT" ){
options.rollingEl.children().eq(0).remove();
options.rollingEl.css("top", "0px");
options.rollingEl.css("left", "0px");
}else if( options.direction == "DOWN" || options.direction == "RIGHT" ){
options.rollingEl.children().eq(options.rollingEl.children().length-1).remove();
}
bEffectProgress = false;
if( btClicked == true && clickArr.length == 0 ){
autoRolling();
}
// 롤링 후 콜백 함수 호출
if( options.callbackMoveFun != null ) options.callbackMoveFun("" + options.direction, options.rollingEl, Number(options.rollingEl.children().eq(0).attr("idx")));
});
}
};
})(jQuery);