/** * Rhinoslider 1.05 * http://rhinoslider.com/ * * Copyright 2012: Sebastian Pontow, Rene Maas (http://renemaas.de/) * Dual licensed under the MIT or GPL Version 2 licenses. * http://rhinoslider.com/license/ */ (function($,window,undefined){ $.extend($.easing,{ def:'out', out:function(none,currentTime,startValue,endValue,totalTime){ return-endValue*(currentTime/=totalTime)*(currentTime-2)+startValue; }, kick:function(none,currentTime,startValue,endValue,totalTime){ if((currentTime/=totalTime/2)<1){ return endValue/2*Math.pow(2,10*(currentTime-1))+startValue; } return endValue/2*(-Math.pow(2,-10*--currentTime)+2)+startValue; }, shuffle:function(none,currentTime,startValue,endValue,totalTime){ if((currentTime/=totalTime/2)<1){ return endValue/2*currentTime*currentTime*currentTime*currentTime*currentTime+startValue; } return endValue/2*((currentTime-=2)*currentTime*currentTime*currentTime*currentTime+2)+startValue; } }); var rhinoSlider=function(element,opts){ var settings=$.extend({},$.fn.rhinoslider.defaults,opts),$slider=$(element),effects=$.fn.rhinoslider.effects,preparations=$.fn.rhinoslider.preparations,vars={ isPlaying:false, intervalAutoPlay:false, active:'', next:'', container:'', items:'', buttons:[], prefix:'rhino-', playedArray:[], playedCounter:0, original:element }; settings.callBeforeInit(); var setUpSettings=function(settings){ settings.controlsPrevNext=String(settings.controlsPrevNext)=='true'?true:false; settings.controlsKeyboard=String(settings.controlsKeyboard)=='true'?true:false; settings.controlsMousewheel=String(settings.controlsMousewheel)=='true'?true:false; settings.controlsPlayPause=String(settings.controlsPlayPause)=='true'?true:false; settings.pauseOnHover=String(settings.pauseOnHover)=='true'?true:false; settings.animateActive=String(settings.animateActive)=='true'?true:false; settings.autoPlay=String(settings.autoPlay)=='true'?true:false; settings.cycled=String(settings.cycled)=='true'?true:false; settings.showTime=parseInt(settings.showTime,10); settings.effectTime=parseInt(settings.effectTime,10); settings.controlFadeTime=parseInt(settings.controlFadeTime,10); settings.captionsFadeTime=parseInt(settings.captionsFadeTime,10); tmpShiftValue=settings.shiftValue; tmpParts=settings.parts; settings.shiftValue=[]; settings.parts=[]; return settings; },init=function($slider,settings,vars){ settings=setUpSettings(settings); $slider.wrap('
'); vars.container=$slider.parent('.'+vars.prefix+'container'); vars.isPlaying=settings.autoPlay; var buttons=''; if(settings.controlsPrevNext){ vars.container.addClass(vars.prefix+'controls-prev-next'); buttons=''+settings.prevText+''+settings.nextText+''; vars.container.append(buttons); vars.buttons.prev=vars.container.find('.'+vars.prefix+'prev'); vars.buttons.next=vars.container.find('.'+vars.prefix+'next'); vars.buttons.prev.click(function(){ prev($slider,settings); if(settings.autoPlay){ pause(); } }); vars.buttons.next.click(function(){ next($slider,settings); if(settings.autoPlay){ pause(); } }); } if(settings.controlsPlayPause){ vars.container.addClass(vars.prefix+'controls-play-pause'); buttons=settings.autoPlay?''+settings.pauseText+'':''+settings.playText+''; vars.container.append(buttons); vars.buttons.play=vars.container.find('.'+vars.prefix+'toggle'); vars.buttons.play.click(function(){ if(vars.isPlaying===false){ play(); }else{ pause(); } }); } vars.container.find('.'+vars.prefix+'btn').css({ position:'absolute', display:'block', cursor:'pointer' }); if(settings.showControls!=='always'){ var allControls=vars.container.find('.'+vars.prefix+'btn'); allControls.stop(true,true).fadeOut(0); if(settings.showControls==='hover'){ vars.container.mouseenter(function(){ allControls.stop(true,true).fadeIn(settings.controlFadeTime); }).mouseleave(function(){ allControls.delay(200).fadeOut(settings.controlFadeTime); }); } } if(settings.showControls!=='never'){ vars.container.addClass(vars.prefix+'show-controls'); } vars.items=$slider.children(); vars.items.addClass(vars.prefix+'item'); vars.items.first().addClass(vars.prefix+'active'); var sliderStyles=settings.styles.split(','),style; $.each(sliderStyles,function(i,cssAttribute){ style=$.trim(cssAttribute); vars.container.css(style,$slider.css(style)); $slider.css(style,' '); switch(style){ case'width':case'height': $slider.css(style,'100%'); break; } }); if(vars.container.css('position')=='static'){ vars.container.css('position','relative'); } $slider.css({ top:'auto', left:'auto', position:'relative' }); vars.items.css({ margin:0, width:$slider.css('width'), height:$slider.css('height'), position:'absolute', top:0, left:0, zIndex:0, opacity:0, overflow:'hidden' }); vars.items.each(function(i){ $(this).attr('id',vars.prefix+'item'+i); }); if(settings.showBullets!=='never'){ vars.container.addClass(vars.prefix+'show-bullets'); var navi='
    '; vars.items.each(function(i){ var $item=$(this); var id=vars.prefix+'item'+i; navi=navi+'
  1. '+parseInt(i+1,10)+'
  2. '; }); navi=navi+'
'; vars.container.append(navi); vars.navigation=vars.container.find('.'+vars.prefix+'bullets'); vars.buttons.bullets=vars.navigation.find('.'+vars.prefix+'bullet'); vars.buttons.bullets.first().addClass(vars.prefix+'active-bullet '+vars.prefix+'first-bullet'); vars.buttons.bullets.last().addClass(vars.prefix+'last-bullet'); vars.buttons.bullets.click(function(){ var itemID=$(this).attr('id').replace('-bullet',''); var $next=vars.container.find('#'+itemID); var curID=parseInt(vars.navigation.find('.'+vars.prefix+'active-bullet').attr('id').replace('-bullet','').replace(vars.prefix+'item',''),10); var nextID=parseInt(itemID.replace(vars.prefix+'item',''),10); if(curIDnextID){ prev($slider,settings,$next); }else{ return false; } if(settings.autoPlay){ pause(); } }); } if(settings.showBullets==='hover'){ vars.navigation.hide(); vars.container.mouseenter(function(){ vars.navigation.stop(true,true).fadeIn(settings.controlFadeTime); }).mouseleave(function(){ vars.navigation.delay(200).fadeOut(settings.controlFadeTime); }); } if(settings.showCaptions!=='never'){ vars.container.addClass(vars.prefix+'show-captions'); vars.items.each(function(){ var $item=$(this); if($item.children('.'+vars.prefix+'caption').length==0){ if($item.children('img').length>0){ var title=$.trim($item.children('img:first').attr('title')); if(undefined!=title||''==title){ $item.append('
'+title+'
'); $item.children('.'+vars.prefix+'caption:empty').remove(); } } } }); if(settings.showCaptions==='hover'){ $('.'+vars.prefix+'caption').hide(); vars.container.mouseenter(function(){ vars.active.find('.'+vars.prefix+'caption').stop(true,true).fadeTo(settings.captionFadeTime,settings.captionsOpacity); }).mouseleave(function(){ vars.active.find('.'+vars.prefix+'caption').delay(200).fadeOut(settings.captionFadeTime); }); }else if(settings.showCaptions==='always'){ $('.'+vars.prefix+'caption').fadeTo(0,settings.captionsOpacity); } } vars.items.each(function(){ $(this).children('img').removeAttr('title'); }); if(settings.autoPlay){ vars.intervalAutoPlay=setInterval(function(){ next($slider,settings); },settings.showTime); }else{ vars.intervalAutoPlay=false; } if(settings.pauseOnHover){ vars.container.addClass(vars.prefix+'pause-on-hover'); $slider.mouseenter(function(){ if(vars.isPlaying){ clearInterval(vars.intervalAutoPlay); if(settings.controlsPlayPause){ vars.buttons.play.text(settings.playText).removeClass(vars.prefix+'pause').addClass(vars.prefix+'play'); } } }).mouseleave(function(){ if(vars.isPlaying){ vars.intervalAutoPlay=setInterval(function(){ next($slider,settings); },settings.showTime); if(settings.controlsPlayPause){ vars.buttons.play.text(settings.pauseText).removeClass(vars.prefix+'play').addClass(vars.prefix+'pause'); } } }); } if(settings.controlsKeyboard){ vars.container.addClass(vars.prefix+'controls-keyboard'); $(document).keyup(function(e){ switch(e.keyCode){ case 37: pause(); prev($slider,settings); break; case 39: pause(); next($slider,settings); break; case 80: if(vars.isPlaying===false){ play(); }else{ pause(); } break; } }); } if(settings.controlsMousewheel){ vars.container.addClass(vars.prefix+'controls-mousewheel'); if(!$.isFunction($.fn.mousewheel)){ alert('$.fn.mousewheel is not a function. Please check that you have the mousewheel-plugin installed properly.'); }else{ $slider.mousewheel(function(e,delta){ e.preventDefault(); if(vars.container.hasClass('inProgress')){ return false; } var dir=delta>0?'up':'down'; if(dir==='up'){ pause(); prev($slider,settings); }else{ pause(); next($slider,settings); } }); } } vars.active=$slider.find('.'+vars.prefix+'active'); vars.active.css({ zIndex:1, opacity:1 }); if(!settings.cycled){ vars.items.each(function(){ var $item=$(this); if($item.is(':first-child')){ $item.addClass(vars.prefix+'firstItem'); } if($item.is(':last-child')){ $item.addClass(vars.prefix+'lastItem'); } }); if(vars.active.is(':first-child')&&settings.controlsPrevNext){ vars.buttons.prev.addClass('disabled'); } if(vars.active.is(':last-child')){ if(settings.controlsPrevNext){ vars.buttons.next.addClass('disabled'); pause(); } if(settings.autoPlay){ vars.buttons.play.addClass('disabled'); } } } if(preparations[settings.effect]==undefined){ console.log('Effect for '+settings.effect+' not found.'); }else{ preparations[settings.effect]($slider,settings,vars); } $slider.data('slider:vars',vars); settings.callBackInit(); },isFirst=function($item){ return $item.is(':first-child'); },isLast=function($item){ return $item.is(':last-child'); },pause=function(){ var vars=$slider.data('slider:vars'); clearInterval(vars.intervalAutoPlay); vars.isPlaying=false; if(settings.controlsPlayPause){ vars.buttons.play.text(settings.playText).removeClass(vars.prefix+'pause').addClass(vars.prefix+'play'); } settings.callBackPause(); },play=function(){ var vars=$slider.data('slider:vars'); vars.intervalAutoPlay=setInterval(function(){ next($slider,settings); },settings.showTime); vars.isPlaying=true; if(settings.controlsPlayPause){ vars.buttons.play.text(settings.pauseText).removeClass(vars.prefix+'play').addClass(vars.prefix+'pause'); } settings.callBackPlay(); },prev=function($slider,settings,$next){ var vars=$slider.data('slider:vars'); if(!settings.cycled&&isFirst(vars.active)){ return false; } settings.callBeforePrev(); if(vars.container.hasClass('inProgress')){ return false; } vars.container.addClass('inProgress'); if(!$next){ if(settings.randomOrder){ var nextID=getRandom(vars); vars.next=vars.container.find('#'+nextID); }else{ vars.next=vars.items.first().hasClass(vars.prefix+'active')?vars.items.last():vars.active.prev(); } }else{ vars.next=$next; } if(vars.next.hasClass(vars.prefix+'active')){ return false; } if(settings.showCaptions!=='never'){ $('.'+vars.prefix+'caption').stop(true,true).fadeOut(settings.captionsFadeTime); } if(settings.showBullets!=='never'&&settings.changeBullets=='before'){ vars.navigation.find('.'+vars.prefix+'active-bullet').removeClass(vars.prefix+'active-bullet'); vars.navigation.find('#'+vars.next.attr('id')+'-bullet').addClass(vars.prefix+'active-bullet'); } setTimeout(function(){ var params=[]; params.settings=settings; params.animateActive=settings.animateActive; params.direction=settings.slidePrevDirection; if(effects[settings.effect]==undefined){ console.log('Preparations for '+settings.effect+' not found.'); }else{ effects[settings.effect]($slider,params,resetElements); } setTimeout(function(){ if(settings.showBullets!=='never'&&settings.changeBullets=='after'){ vars.navigation.find('.'+vars.prefix+'active-bullet').removeClass(vars.prefix+'active-bullet'); vars.navigation.find('#'+vars.next.attr('id')+'-bullet').addClass(vars.prefix+'active-bullet'); } settings.callBackPrev(); },settings.effectTime); },settings.captionsFadeTime); if(settings.showBullets!=='never'&&settings.changeBullets=='after'){ vars.navigation.find('.'+vars.prefix+'active-bullet').removeClass(vars.prefix+'active-bullet'); vars.navigation.find('#'+vars.next.attr('id')+'-bullet').addClass(vars.prefix+'active-bullet'); } },next=function($slider,settings,$next){ var vars=$slider.data('slider:vars'); if(!settings.cycled&&isLast(vars.active)){ return false; } settings.callBeforeNext(); if(vars.container.hasClass('inProgress')){ return false; } vars.container.addClass('inProgress'); if(!$next){ if(settings.randomOrder){ var nextID=getRandom(vars); vars.next=vars.container.find('#'+nextID); }else{ vars.next=vars.items.last().hasClass(vars.prefix+'active')?vars.items.first():vars.active.next(); } }else{ vars.next=$next; } if(vars.next.hasClass(vars.prefix+'active')){ return false; } if(settings.showCaptions!=='never'){ $('.'+vars.prefix+'caption').stop(true,true).fadeOut(settings.captionsFadeTime); } if(settings.showBullets!=='never'&&settings.changeBullets=='before'){ vars.navigation.find('.'+vars.prefix+'active-bullet').removeClass(vars.prefix+'active-bullet'); vars.navigation.find('#'+vars.next.attr('id')+'-bullet').addClass(vars.prefix+'active-bullet'); } setTimeout(function(){ var params=[]; params.settings=settings; params.animateActive=settings.animateActive; params.direction=settings.slideNextDirection; if(effects[settings.effect]==undefined){ console.log('Preparations for '+settings.effect+' not found.'); }else{ effects[settings.effect]($slider,params,resetElements); } setTimeout(function(){ if(settings.showBullets!=='never'&&settings.changeBullets=='after'){ vars.navigation.find('.'+vars.prefix+'active-bullet').removeClass(vars.prefix+'active-bullet'); vars.navigation.find('#'+vars.next.attr('id')+'-bullet').addClass(vars.prefix+'active-bullet'); } settings.callBackNext(); },settings.effectTime); },settings.captionsFadeTime); },getRandom=function(vars){ var curID=vars.active.attr('id'); var itemCount=vars.items.length; var nextID=vars.prefix+'item'+parseInt((Math.random()*itemCount),10); var nextKey=nextID.replace(vars.prefix+'item',''); if(vars.playedCounter>=itemCount){ vars.playedCounter=0; vars.playedArray=[]; } if(curID==nextID||vars.playedArray[nextKey]===true){ return getRandom(vars); }else{ vars.playedArray[nextKey]=true; vars.playedCounter++; return nextID; } },resetElements=function($slider,settings){ var vars=$slider.data('slider:vars'); vars.next.addClass(vars.prefix+'active').css({ zIndex:1, top:0, left:0, width:'100%', height:'100%', margin:0, opacity:1 }); vars.active.css({ zIndex:0, top:0, left:0, margin:0, opacity:0 }).removeClass(vars.prefix+'active'); settings.additionalResets(); if(!settings.cycled){ if(settings.controlsPrevNext){ if(isFirst(vars.next)){ vars.buttons.prev.addClass('disabled'); }else{ vars.buttons.prev.removeClass('disabled'); } if(isLast(vars.next)){ vars.buttons.next.addClass('disabled'); pause(); }else{ vars.buttons.next.removeClass('disabled'); } } if(settings.controlsPlayPause){ if(isLast(vars.next)){ vars.buttons.play.addClass('disabled'); pause(); }else{ vars.buttons.play.removeClass('disabled'); } } } if(settings.showBullets!=='never'){ vars.navigation.find('.'+vars.prefix+'active-bullet').removeClass(vars.prefix+'active-bullet'); vars.navigation.find('#'+vars.next.attr('id')+'-bullet').addClass(vars.prefix+'active-bullet'); } vars.active=vars.next; if(settings.showCaptions!=='never'){ vars.active.find('.'+vars.prefix+'caption').stop(true,true).fadeTo(settings.captionsFadeTime,settings.captionsOpacity); } vars.container.removeClass('inProgress'); }; this.pause=function(){ pause(); }; this.play=function(){ play(); }; this.prev=function($next){ prev($slider,settings,$next); }; this.next=function($next){ next($slider,settings,$next); }; this.uninit=function(){ pause(); vars.container.before($(element).data('slider:original')); $slider.data('slider:vars',null); vars.container.remove(); $(element).data('rhinoslider',null); }; init($slider,settings,vars); }; $.fn.rhinoslider=function(opts){ return this.each(function(){ var element=$(this); if(element.data('rhinoslider')){ return element.data('rhinoslider'); } element.data('slider:original',element.clone()); var rhinoslider=new rhinoSlider(this,opts); element.data('rhinoslider',rhinoslider); }); }; $.fn.rhinoslider.defaults={ effect:'slide', easing:'swing', randomOrder:false, controlsMousewheel:true, controlsKeyboard:true, controlsPrevNext:true, controlsPlayPause:true, pauseOnHover:true, animateActive:true, autoPlay:false, cycled:true, showTime:3000, effectTime:1000, controlFadeTime:650, captionsFadeTime:250, captionsOpacity:0.7, partDelay:100, shiftValue:'150', parts:'5,3', showCaptions:'never', showBullets:'hover', changeBullets:'after', showControls:'hover', slidePrevDirection:'toLeft', slideNextDirection:'toRight', prevText:'', nextText:'', playText:'play', pauseText:'pause', styles:'position,top,right,bottom,left,margin-top,margin-right,margin-bottom,margin-left,width,height', callBeforeInit:function(){ return false; }, callBackInit:function(){ return false; }, callBeforeNext:function(){ return false; }, callBeforePrev:function(){ return false; }, callBackNext:function(){ return false; }, callBackPrev:function(){ return false; }, callBackPlay:function(){ return false; }, callBackPause:function(){ return false; }, additionalResets:function(){ return false; } }; $.fn.rhinoslider.effects={ fade:function($slider,params,callback){ var vars=$slider.data('slider:vars'); var settings=params.settings; if(settings.animateActive){ vars.active.animate({ opacity:0 },settings.effectTime); } vars.next.css({ zIndex:2 }).animate({ opacity:1 },settings.effectTime,settings.easing,function(){ callback($slider,settings); }); } }; $.fn.rhinoslider.preparations={ fade:function($slider,settings,vars){} }; })(jQuery,window);