Fade now works without flashing, updated images object to support lin…

…ks, add some more documentation

jquery.fadeAble.js

@@ -21,33 +21,43 @@
 		// Go through the matched elements and return the jQuery object.
 		this.each(function(){
 		  var container = this;
-		  var containerImage = $(container).children('img');
+		  var defaultLink = $(container).children('a');
+		  	defaultLink.addClass("fadeAble")
+		  var defaultImage = $(defaultLink).children('img');
 
+		  // Let's make sure things don't start jumping around all crazy like
 		  $(container).css({
 		    position: 'relative',
-		    height:   $(containerImage).height(),
-		    width:    $(containerImage).width()
+		    height:   $(defaultImage).height(),
+		    width:    $(defaultImage).width()
 		  });
 
+		  // Add the additional images inside your container
 		  $(options.images).each(function(){
-		    $(container).append('<img style="display:none" src="'+this+'" />');
+		    $(container).append('<a href="'+this.href+'" class="fadeAble" style="display:none" title="'+this.title+'"><img src="'+this.src+'" /></a>');
 		  });
 
-		  $(container).children('img').css({
+		  // Make sure things line up nicely
+		  $(container).children('a').css({
 		    position:  'absolute',
 		    top:        0,
 		    left:       0
 		  });
 
 		  //prepend $(img:first).src to array
-		  options.images.unshift($(container).children('img:first').attr('src'));
+		  options.images.unshift({
+		  		"src": $(defaultImage).attr('src'),
+		  		"href": $(defaultLink).attr('src'),
+		  		"title": $(defaultLink).attr('title')
+		  });
+
 
 		  if (options.controlsShow) {
 				$(this).append(
-				  ' <span class="button" id="'+options.prevId+'">' + 
-  				'<a href=\"javascript:void(0);\">'+
-  				options.prevText +'</a></span> <span class="button" id="'+options.nextId+'">' +
-  				'<a href=\"javascript:void(0);\">'+  options.nextText +'</a></span>'
+				  '<span class="button" style="z-index:2" id="'+options.prevId+'">' + 
+  					'<a href=\"javascript:void(0);\">'+options.prevText +'</a></span>' +
+  				'<span class="button" style="z-index:2" id="'+options.nextId+'">' +
+  					'<a href=\"javascript:void(0);\">'+  options.nextText +'</a></span>'
 				);
 
 				$("#"+options.nextId).click(function(){ fade("next", container); });
@@ -62,21 +72,27 @@
 		});
 
 		function fade(direction, container) {
-      if (options.timeout)
+      if (options.timeout) {
         clearTimeout(options.timeout);
+      }
 
+      //Figure out what the next index should be
   	  var nextIndex;
-  	  if (direction == 'prev')
+  	  if (direction == 'prev') {
   	    nextIndex = ( options.current == 0 ) ? options.images.length-1 : options.current-1;
-  	  else
+  	  } else {
   	    nextIndex = ( options.current == options.images.length-1 ) ? 0 : options.current+1;
+  	  }
 
-  	  var imgs = $(container).children('img');
-  	  imgs.eq(options.current).fadeOut(options.speed);
-  	  imgs.eq(nextIndex).fadeIn(options.speed);
+  	  // Animate the transition
+  	  var imgs = $(container).children('a.fadeAble');
+  	  imgs.hide();
+  	  imgs.eq(options.current).show().css('z-index', '0');
+  	  imgs.eq(nextIndex).css('z-index', '1').fadeIn(options.speed);
 
   		options.current = nextIndex;
 
+  		// Reset the time
       if (options.loop) {
   		  options.timeout = setTimeout(function(){
   				fade("next", container);