/* * jQuery Blueberry Slider v0.4 BETA * http://marktyrrell.com/labs/blueberry/ * * Copyright (C) 2011, Mark Tyrrell * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * */ (function($){ $.fn.extend({ blueberry: function(options) { //default values for plugin options var defaults = { interval: 7000, duration: 500, lineheight: 1, height: 'auto', //reserved hoverpause: true, pager: true, nav: true, //reserved effect: 'fade', // Added Effect keynav: true } var options = $.extend(defaults, options); return this.each(function() { var o = options; var obj = $(this); //store the slide and pager li var slides = $('.slides li', obj); var pager = $('.pager li', obj); //set initial current and next slide index values var current = 0; var next = current+1; //get height and width of initial slide image and calculate size ratio var imgHeight = slides.eq(current).find('img').height(); var imgWidth = slides.eq(current).find('img').width(); var imgRatio = imgWidth/imgHeight; //define vars for setsize function var sliderWidth = 0; var cropHeight = 0; //hide all slides, fade in the first, add active class to first slide slides.hide().eq(current).fadeIn(o.duration).addClass('active'); //build pager if it doesn't already exist and if enabled if(pager.length) { pager.eq(current).addClass('active'); } else if(o.pager){ obj.append(''); slides.each(function(index) { $('.pager', obj).append('
  • '+index+'
    • ') }); pager = $('.pager li', obj); pager.eq(current).addClass('active'); } //rotate to selected slide on pager click if(pager){ $('a', pager).click(function() { //stop the timer clearTimeout(obj.play); //set the slide index based on pager index next = $(this).parent().index(); //rotate the slides rotate(); return false; }); } //primary function to change slides var rotate = function(){ //fade out current slide and remove active class, //fade in next slide and add active class switch (o.effect) { case 'fade': slides.eq(current).fadeOut(o.duration).removeClass('active') .end().eq(next).fadeIn(o.duration).addClass('active').queue(function(){ //add rotateTimer function to end of animation queue //this prevents animation buildup caused by requestAnimationFrame //rotateTimer starts a timer for the next rotate rotateTimer(); $(this).dequeue() }); break; case 'slideLeft': slides.eq(next).css('left',sliderWidth); slides.eq(current).animate({left: -sliderWidth*2+'px'},{duration: o.duration*2}) .removeClass('active') .end() .eq(next).fadeIn(0).animate({left: '0px'},{duration: o.duration}) .addClass('active').queue(function(){ //add rotateTimer function to end of animation queue //this prevents animation buildup caused by requestAnimationFrame //rotateTimer starts a timer for the next rotate rotateTimer(); $(this).dequeue() }); break; case 'slideSqueeze': slides.eq(next).css('left',-sliderWidth); slides.eq(current) .animate({left: sliderWidth+'px'},{duration: o.duration}) .removeClass('active') .end() .eq(next).fadeIn(0).animate({left: '0px'},{duration: o.duration}) .addClass('active').queue(function(){ //add rotateTimer function to end of animation queue //this prevents animation buildup caused by requestAnimationFrame //rotateTimer starts a timer for the next rotate rotateTimer(); $(this).dequeue() }); break; case 'slideLeftRight': slides.eq(next).css('left',-sliderWidth); slides.eq(current) .animate({left: -sliderWidth+'px'},{duration: o.duration}) .removeClass('active') .end() .eq(next).fadeIn(0).animate({left: '0px'},{duration: o.duration}) .addClass('active').queue(function(){ //add rotateTimer function to end of animation queue //this prevents animation buildup caused by requestAnimationFrame //rotateTimer starts a timer for the next rotate rotateTimer(); $(this).dequeue() }); break; case 'cut': slides.eq(current).fadeOut(0).removeClass('active') .end().eq(next).fadeIn(0).addClass('active').queue(function(){ //add rotateTimer function to end of animation queue //this prevents animation buildup caused by requestAnimationFrame //rotateTimer starts a timer for the next rotate rotateTimer(); $(this).dequeue() }); break; } //update pager to reflect slide change if(pager){ pager.eq(current).removeClass('active') .end().eq(next).addClass('active'); } //update current and next vars to reflect slide change //set next as first slide if current is the last current = next; next = current >= slides.length-1 ? 0 : current+1; }; //create a timer to control slide rotation interval var rotateTimer = function(){ obj.play = setTimeout(function(){ //trigger slide rotate function at end of timer rotate(); }, o.interval); }; //start the timer for the first time rotateTimer(); //pause the slider on hover //disabled by default due to bug if(o.hoverpause){ slides.hover(function(){ //stop the timer in mousein clearTimeout(obj.play); }, function(){ //start the timer on mouseout rotateTimer(); }); } //calculate and set height based on image width/height ratio and specified line height var setsize = function(){ //$.fx.off = !$.fx.off; sliderWidth = $('.slides', obj).width(); cropHeight = Math.floor(((sliderWidth/imgRatio)/o.lineheight))*o.lineheight; $('.slides', obj).css({height: cropHeight}); //slides.eq(current).stop('false','true'); //slides.eq(current).eq(next).stop('false','true'); //clearTimeout(obj.play); $('.slides').find('img').css({height: cropHeight}); //next = +1; //current += 1; //rotateTimer(); //rotate(); //$.fx.off = !$.fx.off; }; setsize(); //bind setsize function to window resize event $(window).resize(function(){ setsize(); }); //Add keyboard navigation if(o.keynav){ $(document).keyup(function(e){ switch (e.which) { case 39: case 32: //right arrow & space clearTimeout(obj.play); rotate(); break; case 37: // left arrow clearTimeout(obj.play); next = current - 1; rotate(); break; } }); } }); } }); })(jQuery);