jQuery Image Cycler

basicImageCycler.js

/*
* Plugin Name : basicImageCycler
* Author      : Shane Donnelly
*/
(function($){

  $.fn.basicImageCycler = function(options){
    var defaults = {
      'images'          : [],
      'slide_timer'     : 6000,
      'image_path'      : '',
      'append_images'   : true,
      'append_buttons'  : false
    };

    //call in the default otions
    var options = $.extend(defaults, options);
 
    return this.each(function() {
      
      var $element = $(this),
          image_array = options.images,
          image_path = options.image_path,
          $images,
          num_images,
          cur_image =  0,
          prev_image = 0,
          slideshow_timer;
      
      init();
      initEvents();
      
      /****************************************
      * Set up
      ****************************************/
      function init(){
        
        if(options.append_images){
          $(image_array).each(function(index, image){
            $element.append('<img src="' + image_path + image + '" style="position:absolute; top:0;left:0;"/>');
          });
        }
        
        if(options.append_buttons){
          //
          var button_style = "position:absolute; width:50px; height:50px; margin-left:0;margin-right:0; padding:0;color:#f7f7f7; font-size:36px;cursor:pointer;text-shadow:0 1px 1px #888888;",
          image_height = $element.find('img').first().height(),
          button_top = image_height/2 - 25;
          //
          $element.append('<p class="prev_button" style="left:0; top:'+ button_top + 'px; ' + button_style +'">&lt;</p>');
          $element.append('<p class="next_button" style="right:0;top:'+ button_top + 'px; ' + button_style +'">&gt;</p>');
        }
        
        num_images = $element.find('img').length;
        if(num_images > 1){ 
          $images = $element.find('img');
          startAutoSlideshow();
        }
        
        $element.find('img:eq(0)').siblings('img').hide();
        $element.css('position','relative');
        
      }
          
      /****************************************
      * Events
      ****************************************/
      function initEvents(){
      
        $('.prev_button').on('click', function(){
          stopAutoSlideshow(slideshow_timer);
          changeImage('prev');
        });
        
        $('.next_button').on('click', function(){
          stopAutoSlideshow(slideshow_timer);
          changeImage('next');
        });
        
      }
      
      /****************************************
      *
      * direction 'prev' or 'next' 
      *
      ****************************************/
      function changeImage(direction){
        prev_image = cur_image;
        
        if(direction === 'prev'){
          prev_image === 0 ? cur_image = num_images - 1 : cur_image-- ;
        }
        else{
          prev_image === (num_images - 1) ? cur_image = 0 : cur_image++ ;
        }
          
        $images.fadeOut();
        $images.eq(cur_image).fadeIn();
      
      }
      
      /****************************************
      *
      ****************************************/
      function startAutoSlideshow(){
        slideshow_timer = setInterval(function(){changeImage('next');}, options.slide_timer);
      }
      
      /****************************************
      *
      ****************************************/
      function stopAutoSlideshow(timer_name){
        clearInterval(timer_name);
      }

    });
  }
})(jQuery);