/** * * * bxSlider: Content slider / fade / ticker using the jQuery javascript library. * * Author: Steven Wanderski * Email: wandoledzep@gmail.com * URL: http://bxslider.com * * **/ jQuery.fn.bxSlider = function(options){ ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Declare variables and functions ///////////////////////////////////////////////////////////////////////////////////////////////////////////// var defaults = { mode: 'slide', speed: 500, auto: false, auto_direction: 'left', pause: 2500, controls: true, prev_text: 'prev', next_text: 'next', width: $(this).children().width(), prev_img: '', next_img: '', ticker_direction: 'left', wrapper_class: 'container' }; options = $.extend(defaults, options); if(options.mode == 'ticker'){ options.auto = true; } var $this = $(this); var $parent_width = options.width; var current = 0; var is_working = false; var child_count = $this.children().size(); var i = 0; var j = 0; var k = 0; function animate_next(){ is_working = true; $this.animate({'left':'-' + $parent_width * 2 + 'px'}, options.speed, function(){ $this.css({'left':'-' + $parent_width + 'px'}).children(':first').appendTo($this); is_working = false; }); } function animate_prev(){ is_working = true; $this.animate({'left': 0}, options.speed, function(){ $this.css({'left':'-' + $parent_width + 'px'}).children(':last').insertBefore($this.children(':first')); is_working = false; }); } function fade(direction){ if(direction == 'next'){ var last_before_switch = child_count - 1; var start_over = 0; var incr = k + 1; }else if(direction == 'prev'){ var last_before_switch = 0; var start_over = child_count -1; var incr = k - 1; } is_working = true; if(k == last_before_switch){ $this.children().eq(k).fadeTo(options.speed, 0, function(){$(this).hide();}); //$this.children().eq(k).css({'left':'-9999px'}); $this.children().eq(start_over).show().fadeTo(options.speed, 1, function(){ is_working = false; k = start_over; }); }else{ $this.children().eq(k).fadeTo(options.speed, 0, function(){$(this).hide();}); //$this.children().eq(k).css({'left':'-9999px'}); $this.children().eq(incr).show().fadeTo(options.speed, 1, function(){ is_working = false; k = incr; }); } } function add_controls(){ ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Check if user selected images to use for next / prev ///////////////////////////////////////////////////////////////////////////////////////////////////////////// if(options.prev_img != '' || options.next_img != ''){ $this.parent().append(''); }else{ $this.parent().append('' + options.prev_text + '' + options.next_text + ''); } $this.parent().find('.slider_prev').css({'float':'left', 'outline':'0'}); $this.parent().find('.slider_next').css({'float':'right', 'outline':'0'}); ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Accomodate padding-top for controls when elements are absolutely positioned (only in fade mode) ///////////////////////////////////////////////////////////////////////////////////////////////////////////// if(options.mode == 'fade'){ $this.parent().find('.slider_prev').css({'paddingTop' : $this.children().height()}) $this.parent().find('.slider_next').css({'paddingTop' : $this.children().height()}) } ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Actions when user clicks next / prev buttons ///////////////////////////////////////////////////////////////////////////////////////////////////////////// $this.parent().find('.slider_next').click(function(){ if(!is_working){ if(options.mode == 'slide'){ animate_next(); if(options.auto){ clearInterval($.t); $.t = setInterval(function(){animate_next();}, options.pause); } }else if(options.mode == 'fade'){ fade('next'); if(options.auto){ clearInterval($.t); $.t = setInterval(function(){fade('next');}, options.pause); } } } return false; }); $this.parent().find('.slider_prev').click(function(){ if(!is_working){ if(options.mode == 'slide'){ animate_prev(); if(options.auto){ clearInterval($.t); $.t = setInterval(function(){animate_prev();}, options.pause); } }else if(options.mode == 'fade'){ fade('prev'); if(options.auto){ clearInterval($.t); $.t = setInterval(function(){fade('prev');}, options.pause); } } } return false; }); } function ticker() { if(options.ticker_direction == 'left'){ $this.animate({'left':'-' + $parent_width * 2 + 'px'}, options.speed, 'linear', function(){ $this.css({'left':'-' + $parent_width + 'px'}).children(':first').appendTo($this); ticker(); }); }else if(options.ticker_direction == 'right'){ $this.animate({'left': 0}, options.speed, 'linear', function(){ $this.css({'left':'-' + $parent_width + 'px'}).children(':last').insertBefore($this.children(':first')); ticker(); }); } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Create content wrapper and set CSS ///////////////////////////////////////////////////////////////////////////////////////////////////////////// $this.wrap('
'); //console.log($this.parent().css('paddingTop')); if(options.mode == 'slide' || options.mode == 'ticker'){ $this.parent().css({ 'overflow' : 'hidden', 'position' : 'relative', 'width' : options.width + 'px' }); $this.css({ 'width' : '999999px', 'position' : 'relative', 'left' : '-' + $parent_width + 'px' }); $this.children().css({ 'float' : 'left', 'width' : $parent_width }); $this.children(':last').insertBefore($this.children(':first')); }else if(options.mode == 'fade'){ $this.parent().css({ 'overflow' : 'hidden', 'position' : 'relative', 'width' : options.width + 'px' //'height' : $this.children().height() }); if(!options.controls){ $this.parent().css({'height' : $this.children().height()}); } $this.children().css({ 'position' : 'absolute', 'width' : $parent_width, 'listStyle' : 'none', 'opacity' : 0, 'display' : 'none' }); $this.children(':first').css({ 'opacity' : 1, 'display' : 'block' }); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Check if user selected "auto" ///////////////////////////////////////////////////////////////////////////////////////////////////////////// if(!options.auto){ add_controls(); }else{ if(options.mode == 'ticker'){ ticker(); }else{ ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Set a timed interval ///////////////////////////////////////////////////////////////////////////////////////////////////////////// if(options.mode == 'slide'){ if(options.auto_direction == 'left'){ $.t = setInterval(function(){animate_next();}, options.pause); }else if(options.auto_direction == 'right'){ $.t = setInterval(function(){animate_prev();}, options.pause); } }else if(options.mode == 'fade'){ if(options.auto_direction == 'left'){ $.t = setInterval(function(){fade('next');}, options.pause); }else if(options.auto_direction == 'right'){ $.t = setInterval(function(){fade('prev');}, options.pause); } } if(options.controls){ add_controls(); } } } }