(function($) { var imgeFfect = function(element, options){ var settings = $.extend({}, $.fn.imgeffect.defaults, options); //초반 셋팅값 가져오기 var vars = { currentSlide: 0, currentImage: '', totalSlides: 0, randAnim: '', running: false, paused: false, stop: false }; //슬라이더 값가저오기 var slider = $(element); slider.data('nivo:vars', vars); slider.css('position','relative'); slider.addClass('imgeffect'); //변수값적용및 position 변경 slider.parent().append("
"); //리스트 셋팅 slider.find('img').each(function() { var item = $(this); slider.parent().find('.titleboxul').append("
  • " + "
  • "); }); var kids = slider.children(); kids.each(function() { var child = $(this); var link = ''; if(!child.is('img')){ if(child.is('a')){ child.addClass('imgeffect-imageLink'); link = child; } child = child.find('img:first'); } var childWidth = child.width(); if(childWidth == 0) childWidth = child.attr('width'); var childHeight = child.height(); if(childHeight == 0) childHeight = child.attr('height'); //Resize the slider if(childWidth > slider.width()){ slider.width(childWidth); } if(childHeight > slider.height()){ slider.height(childHeight); } if(link != ''){ link.css('display','none'); } child.css('display','none'); vars.totalSlides++; }); //Set startSlide if(settings.startSlide > 0){ if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1; vars.currentSlide = settings.startSlide; } if($(kids[vars.currentSlide]).is('img')){ vars.currentImage = $(kids[vars.currentSlide]); $('.item').removeClass("active"); } else { vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); slider.parent().parent().find('.item:first').addClass("active"); } //Show initial link if($(kids[vars.currentSlide]).is('a')){ $(kids[vars.currentSlide]).css('display','block'); } //첫번째 이미지 셋팅 slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat'); //Create caption slider.append( $('

    ').css({ display:'none', opacity:settings.captionOpacity }) ); var processCaption = function(settings){ var imgeffectCaption = $('.imgeffect-caption', slider); if(vars.currentImage.attr('title') != ''){ var title = vars.currentImage.attr('title'); if(title.substr(0,1) == '#') title = $(title).html(); if(imgeffectCaption.css('display') == 'block'){ imgeffectCaption.find('p').fadeOut(settings.animSpeed, function(){ $(this).html(title); $(this).fadeIn(settings.animSpeed); }); } else { imgeffectCaption.find('p').html(title); } //imgeffectCaption.fadeIn(settings.animSpeed); } else { //imgeffectCaption.fadeOut(settings.animSpeed); } } //Process initial caption processCaption(settings); var timer = 0; if(!settings.manualAdvance && kids.length > 1){ timer = setInterval(function(){ imgeffectRun(slider, kids, settings, false); }, settings.pauseTime); } //Add Direction nav if(settings.directionNav){ slider.append('
    '+ settings.prevText +''+ settings.nextText +'
    '); //Hide Direction nav if(settings.directionNavHide){ $('.imgeffect-directionNav', slider).hide(); slider.hover(function(){ $('.imgeffect-directionNav', slider).show(); }, function(){ $('.imgeffect-directionNav', slider).hide(); }); } $('li.item').live('click', function(){ clearInterval(timer); timer = ''; vars.currentSlide=$(this).attr('rel') -2; imgeffectRun(slider, kids, settings, 'prev'); }); $('a.imgeffect-prevNav').live('click', function(){ if(vars.running) return false; clearInterval(timer); timer = ''; vars.currentSlide -= 2; imgeffectRun(slider, kids, settings, 'prev'); }); $('a.imgeffect-nextNav').live('click', function(){ if(vars.running) return false; clearInterval(timer); timer = ''; imgeffectRun(slider, kids, settings, 'next'); }); } //Keyboard Navigation if(settings.keyboardNav){ $(window).keypress(function(event){ //Left if(event.keyCode == '37'){ if(vars.running) return false; clearInterval(timer); timer = ''; vars.currentSlide-=2; imgeffectRun(slider, kids, settings, 'prev'); } //Right if(event.keyCode == '39'){ if(vars.running) return false; clearInterval(timer); timer = ''; imgeffectRun(slider, kids, settings, 'next'); } }); } //For pauseOnHover setting if(settings.pauseOnHover){ slider.hover(function(){ vars.paused = true; clearInterval(timer); timer = ''; }, function(){ vars.paused = false; //Restart the timer if(timer == '' && !settings.manualAdvance){ timer = setInterval(function(){ if($('.item').size()-1 > (vars.currentSlide)){ $('.item').removeClass("active"); $('.item').eq(vars.currentSlide + 1).addClass("active"); }else{ $('.item').removeClass("active"); $('.item').eq(0).addClass("active"); } imgeffectRun(slider, kids, settings, false); }, settings.pauseTime); } }); } //Event when Animation finishes slider.bind('nivo:animFinished', function(){ vars.running = false; //Hide child links $(kids).each(function(){ if($(this).is('a')){ $(this).css('display','none'); } }); //Show current link if($(kids[vars.currentSlide]).is('a')){ $(kids[vars.currentSlide]).css('display','block'); } //Restart the timer if(timer == '' && !vars.paused && !settings.manualAdvance){ timer = setInterval(function(){ if($('.item').size()-1 > (vars.currentSlide)){ $('.item').removeClass("active"); $('.item').eq(vars.currentSlide + 1).addClass("active"); }else{ $('.item').removeClass("active"); $('.item').eq(0).addClass("active"); } imgeffectRun(slider, kids, settings, false); }, settings.pauseTime); } //Trigger the afterChange callback settings.afterChange.call(this); }); var createSlices = function(slider, settings, vars){ for(var i = 0; i < settings.slices; i++){ var sliceWidth = Math.round(slider.width()/settings.slices); if(i == settings.slices-1){ slider.append( $('
    ').css({ left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px', height:'0px', opacity:'0', background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' }) ); } else { slider.append( $('
    ').css({ left:(sliceWidth*i)+'px', width:sliceWidth+'px', height:'0px', opacity:'0', background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' }) ); } } } var createBoxes = function(slider, settings, vars){ var boxWidth = Math.round(slider.width()/settings.boxCols); var boxHeight = Math.round(slider.height()/settings.boxRows); for(var rows = 0; rows < settings.boxRows; rows++){ for(var cols = 0; cols < settings.boxCols; cols++){ if(cols == settings.boxCols-1){ slider.append( $('
    ').css({ opacity:0, left:(boxWidth*cols)+'px', top:(boxHeight*rows)+'px', width:(slider.width()-(boxWidth*cols))+'px', height:boxHeight+'px', background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px' }) ); } else { slider.append( $('
    ').css({ opacity:0, left:(boxWidth*cols)+'px', top:(boxHeight*rows)+'px', width:boxWidth+'px', height:boxHeight+'px', background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px' }) ); } } } } var imgeffectRun = function(slider, kids, settings, nudge){ //Get our vars var vars = slider.data('nivo:vars'); if($('.item').size()-1 > (vars.currentSlide)){ $('.item').removeClass("active"); $('.item').eq(vars.currentSlide + 1).addClass("active"); }else{ $('.item').removeClass("active"); $('.item').eq(0).addClass("active"); } //Trigger the lastSlide callback if(vars && (vars.currentSlide == vars.totalSlides - 1)){ settings.lastSlide.call(this); } // Stop if((!vars || vars.stop) && !nudge) return false; //Trigger the beforeChange callback settings.beforeChange.call(this); //Set current background before change if(!nudge){ slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat'); } else { if(nudge == 'prev'){ slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat'); } if(nudge == 'next'){ slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat'); } } vars.currentSlide++; //Trigger the slideshowEnd callback if(vars.currentSlide == vars.totalSlides){ vars.currentSlide = 0; settings.slideshowEnd.call(this); } if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1); //Set vars.currentImage if($(kids[vars.currentSlide]).is('img')){ vars.currentImage = $(kids[vars.currentSlide]); } else { vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); } //Set active links if(settings.controlNav){ $('.imgeffect-controlNav a', slider).removeClass('active'); $('.imgeffect-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active'); } //Process caption processCaption(settings); // Remove any slices from last transition $('.imgeffect-slice', slider).remove(); // Remove any boxes from last transition $('.imgeffect-box', slider).remove(); if(settings.effect == 'random'){ var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade', 'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse'); vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))]; if(vars.randAnim == undefined) vars.randAnim = 'fade'; } //Run random effect from specified set (eg: effect:'fold,fade') if(settings.effect.indexOf(',') != -1){ var anims = settings.effect.split(','); vars.randAnim = anims[Math.floor(Math.random()*(anims.length))]; if(vars.randAnim == undefined) vars.randAnim = 'fade'; } //Run effects vars.running = true; if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' || settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){ createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; var slices = $('.imgeffect-slice', slider); if(settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') slices = $('.imgeffect-slice', slider)._reverse(); slices.each(function(){ var slice = $(this); slice.css({ 'top': '0px' }); if(i == settings.slices-1){ setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if(settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' || settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'){ createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; var slices = $('.imgeffect-slice', slider); if(settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') slices = $('.imgeffect-slice', slider)._reverse(); slices.each(function(){ var slice = $(this); slice.css({ 'bottom': '0px' }); if(i == settings.slices-1){ setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if(settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' || settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'){ createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; var v = 0; var slices = $('.imgeffect-slice', slider); if(settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') slices = $('.imgeffect-slice', slider)._reverse(); slices.each(function(){ var slice = $(this); if(i == 0){ slice.css('top','0px'); i++; } else { slice.css('bottom','0px'); i = 0; } if(v == settings.slices-1){ setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; v++; }); } else if(settings.effect == 'fold' || vars.randAnim == 'fold'){ createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; $('.imgeffect-slice', slider).each(function(){ var slice = $(this); var origWidth = slice.width(); slice.css({ top:'0px', height:'100%', width:'0px' }); if(i == settings.slices-1){ setTimeout(function(){ slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if(settings.effect == 'fade' || vars.randAnim == 'fade'){ createSlices(slider, settings, vars); var firstSlice = $('.imgeffect-slice:first', slider); firstSlice.css({ 'height': '100%', 'width': slider.width() + 'px' }); firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); } else if(settings.effect == 'slideInRight' || vars.randAnim == 'slideInRight'){ createSlices(slider, settings, vars); var firstSlice = $('.imgeffect-slice:first', slider); firstSlice.css({ 'height': '100%', 'width': '0px', 'opacity': '1' }); firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); } else if(settings.effect == 'slideInLeft' || vars.randAnim == 'slideInLeft'){ createSlices(slider, settings, vars); var firstSlice = $('.imgeffect-slice:first', slider); firstSlice.css({ 'height': '100%', 'width': '0px', 'opacity': '1', 'left': '', 'right': '0px' }); firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ // Reset positioning firstSlice.css({ 'left': '0px', 'right': '' }); slider.trigger('nivo:animFinished'); }); } else if(settings.effect == 'boxRandom' || vars.randAnim == 'boxRandom'){ createBoxes(slider, settings, vars); var totalBoxes = settings.boxCols * settings.boxRows; var i = 0; var timeBuff = 0; var boxes = shuffle($('.imgeffect-box', slider)); boxes.each(function(){ var box = $(this); if(i == totalBoxes-1){ setTimeout(function(){ box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ box.animate({ opacity:'1' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 20; i++; }); } else if(settings.effect == 'boxRain' || vars.randAnim == 'boxRain' || settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' || settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){ createBoxes(slider, settings, vars); var totalBoxes = settings.boxCols * settings.boxRows; var i = 0; var timeBuff = 0; // Split boxes into 2D array var rowIndex = 0; var colIndex = 0; var box2Darr = new Array(); box2Darr[rowIndex] = new Array(); var boxes = $('.imgeffect-box', slider); if(settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){ boxes = $('.imgeffect-box', slider)._reverse(); } boxes.each(function(){ box2Darr[rowIndex][colIndex] = $(this); colIndex++; if(colIndex == settings.boxCols){ rowIndex++; colIndex = 0; box2Darr[rowIndex] = new Array(); } }); // Run animation for(var cols = 0; cols < (settings.boxCols * 2); cols++){ var prevCol = cols; for(var rows = 0; rows < settings.boxRows; rows++){ if(prevCol >= 0 && prevCol < settings.boxCols){ /* Due to some weird JS bug with loop vars being used in setTimeout, this is wrapped with an anonymous function call */ (function(row, col, time, i, totalBoxes) { var box = $(box2Darr[row][col]); var w = box.width(); var h = box.height(); if(settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){ box.width(0).height(0); } if(i == totalBoxes-1){ setTimeout(function(){ box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + time)); } else { setTimeout(function(){ box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3); }, (100 + time)); } })(rows, prevCol, timeBuff, i, totalBoxes); i++; } prevCol--; } timeBuff += 100; } } } var shuffle = function(arr){ for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x); return arr; } // For debugging var trace = function(msg){ if (this.console && typeof console.log != "undefined") console.log(msg); } // Start / Stop this.stop = function(){ if(!$(element).data('nivo:vars').stop){ $(element).data('nivo:vars').stop = true; trace('Stop Slider'); } } this.start = function(){ if($(element).data('nivo:vars').stop){ $(element).data('nivo:vars').stop = false; trace('Start Slider'); } } //Trigger the afterLoad callback settings.afterLoad.call(this); return this; }; $.fn.imgeffect = function(options) { return this.each(function(key, value){ var element = $(this); // Return early if this element already has a plugin instance if (element.data('imgeffect')) return element.data('imgeffect'); // Pass options to plugin constructor var imgeffect = new imgeFfect(this, options); // Store plugin object in this element's data element.data('imgeffect', imgeffect); }); }; //Default settings $.fn.imgeffect.defaults = { effect: 'fade', //이펙트('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade','boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse') slices: 15, //분할수 boxCols: 8, boxRows: 4, animSpeed: 500, pauseTime: 5000, startSlide: 0, directionNav: true, directionNavHide: true, controlNav: true, controlNavThumbs: false, controlNavThumbsFromRel: false, controlNavThumbsSearch: '.jpg', controlNavThumbsReplace: '_thumb.jpg', keyboardNav: true, pauseOnHover: true, manualAdvance: false, captionOpacity: 0.8, prevText: '', nextText: '', beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){}, lastSlide: function(){}, afterLoad: function(){} }; $.fn._reverse = [].reverse; })(jQuery);