title: Customise Easy Slider 1.7 to fade not slide
body: <p>I'm using this plugin: <a href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider" rel="nofollow noreferrer">http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider</a></p>
  
  <p>I'm pretty new to jquery, and I was wondering if anyone could tell me how to change the the images to fade in and out rather than slide. </p>
  
  <pre><code>(function($) {
  
   $.fn.easySlider = function(options){
  
    // default configuration properties
    var defaults = {   
     prevId:   'prevBtn',
     prevText:   'Previous',
     nextId:   'nextBtn', 
     nextText:   'Next',
     controlsShow: true,
     controlsBefore: '',
     controlsAfter: '', 
     controlsFade: true,
     firstId:   'firstBtn',
     firstText:   'First',
     firstShow:  false,
     lastId:   'lastBtn', 
     lastText:   'Last',
     lastShow:  false,    
     vertical:  false,
     speed:    800,
     auto:   true,
     pause:   2000,
     continuous:  true, 
     numeric:   true,
     numericId:   'controls'
    }; 
  
    var options = $.extend(defaults, options);  
  
    this.each(function() {  
     var obj = $(this);     
     var s = $("li", obj).length;
     var w = $("li", obj).width(); 
     var h = $("li", obj).height(); 
     var clickable = true;
     obj.width(w); 
     obj.height(h); 
     obj.css("overflow","hidden");
     var ts = s-1;
     var t = 0;
     $("ul", obj).css('width',s*w);   
  
     if(options.continuous){
      $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
      $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
      $("ul", obj).css('width',(s+1)*w);
     };    
  
     if(!options.vertical) $("li", obj).css('float','left');
  
     if(options.controlsShow){
      var html = options.controlsBefore;    
      if(options.numeric){
       html += '&lt;ol id="'+ options.numericId +'"&gt;&lt;/ol&gt;';
      } else {
       if(options.firstShow) html += '&lt;span id="'+ options.firstId +'"&gt;&lt;a href=\"javascript:void(0);\"&gt;'+ options.firstText +'&lt;/a&gt;&lt;/span&gt;';
       html += ' &lt;span id="'+ options.prevId +'"&gt;&lt;a href=\"javascript:void(0);\"&gt;'+ options.prevText +'&lt;/a&gt;&lt;/span&gt;';
       html += ' &lt;span id="'+ options.nextId +'"&gt;&lt;a href=\"javascript:void(0);\"&gt;'+ options.nextText +'&lt;/a&gt;&lt;/span&gt;';
       if(options.lastShow) html += ' &lt;span id="'+ options.lastId +'"&gt;&lt;a href=\"javascript:void(0);\"&gt;'+ options.lastText +'&lt;/a&gt;&lt;/span&gt;';    
      };
  
      html += options.controlsAfter;      
      $(obj).after(html);          
     };
  
     if(options.numeric){         
      for(var i=0;i&lt;s;i++){      
       $(document.createElement("li"))
        .attr('id',options.numericId + (i+1))
        .html('&lt;a rel='+ i +' href=\"javascript:void(0);\"&gt;'+ (i+1) +'&lt;/a&gt;')
        .appendTo($("#"+ options.numericId))
        .click(function(){       
         animate($("a",$(this)).attr('rel'),true);
        });             
      };       
     } else {
      $("a","#"+options.nextId).click(function(){  
       animate("next",true);
      });
      $("a","#"+options.prevId).click(function(){  
       animate("prev",true);    
      }); 
      $("a","#"+options.firstId).click(function(){  
       animate("first",true);
      });    
      $("a","#"+options.lastId).click(function(){  
       animate("last",true);    
      });    
     };
  
     function setCurrent(i){
      i = parseInt(i)+1;
      $("li", "#" + options.numericId).removeClass("current");
      $("li#" + options.numericId + i).addClass("current");
     };
  
     function adjust(){
      if(t&gt;ts) t=0;  
      if(t&lt;0) t=ts; 
      if(!options.vertical) {
       $("ul",obj).css("margin-left",(t*w*-1));
      } else {
       $("ul",obj).css("margin-left",(t*h*-1));
      }
      clickable = true;
      if(options.numeric) setCurrent(t);
     };
  
     function animate(dir,clicked){
      if (clickable){
       clickable = false;
       var ot = t;    
       switch(dir){
        case "next":
         t = (ot&gt;=ts) ? (options.continuous ? t+1 : ts) : t+1;      
         break; 
        case "prev":
         t = (t&lt;=0) ? (options.continuous ? t-1 : 0) : t-1;
         break; 
        case "first":
         t = 0;
         break; 
        case "last":
         t = ts;
         break; 
        default:
         t = dir;
         break; 
       }; 
       var diff = Math.abs(ot-t);
       var speed = diff*options.speed;      
       if(!options.vertical) {
        p = (t*w*-1);
        $("ul",obj).animate(
         { marginLeft: p }, 
         { queue:false, duration:speed, complete:adjust }
        );    
       } else {
        p = (t*h*-1);
        $("ul",obj).animate(
         { marginTop: p }, 
         { queue:false, duration:speed, complete:adjust }
        );     
       };
  
       if(!options.continuous &amp;&amp; options.controlsFade){     
        if(t==ts){
         $("a","#"+options.nextId).hide();
         $("a","#"+options.lastId).hide();
        } else {
         $("a","#"+options.nextId).show();
         $("a","#"+options.lastId).show();     
        };
        if(t==0){
         $("a","#"+options.prevId).hide();
         $("a","#"+options.firstId).hide();
        } else {
         $("a","#"+options.prevId).show();
         $("a","#"+options.firstId).show();
        };     
       };    
  
       if(clicked) clearTimeout(timeout);
       if(options.auto &amp;&amp; dir=="next" &amp;&amp; !clicked){;
        timeout = setTimeout(function(){
         animate("next",false);
        },diff*options.speed+options.pause);
       };
  
      };
  
     };
     // init
     var timeout;
     if(options.auto){;
      timeout = setTimeout(function(){
       animate("next",false);
      },options.pause);
     };  
  
     if(options.numeric) setCurrent(0);
  
     if(!options.continuous &amp;&amp; options.controlsFade){     
      $("a","#"+options.prevId).hide();
      $("a","#"+options.firstId).hide();    
     };    
  
    });
  
   };
  
  })(jQuery);
  </code></pre>