/* * 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: 0, duration: 500, lineheight: 1, height: 'auto', //reserved hoverpause: false, pager: true, nav: true, //reserved 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 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() }); //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() { if (o.interval > 0) { 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 if (obj.play !== undefined) { 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() { sliderWidth = $('.slides', obj).width(); cropHeight = Math.floor(((sliderWidth / imgRatio) / o.lineheight)) * o.lineheight; //$('.slides', obj).css({height: cropHeight}); }; 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 if (obj.play !== undefined) { clearTimeout(obj.play); } rotate(); break; case 37: // left arrow if (obj.play !== undefined) { clearTimeout(obj.play); } next = current - 1; rotate(); break; } }); } }); } }); })(jQuery);