So I have a simple Feature List javascript going. What I've been trying to do for the past few days is integrate another option to the JQuery. I was wanting to print out text like an alt tag or in my case the HREF of links using the "attr()" that JQuery has. The problem is getting it to sync with the feature list. I tried coding one from scratch but it was clunky and messy. Here's my original code:


::Javascript::
Code:
/*
 * FeatureList - simple and easy creation of an interactive "Featured Items" widget
 * Examples and documentation at: http://jqueryglobe.com/article/feature_list/
 * Version: 1.0.0 (01/09/2009)
 * Copyright (c) 2009 jQueryGlobe
 * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
 * Requires: jQuery v1.3+
*/
;(function($) {
	$.fn.featureList = function(options) {
		var tabs	= $(this);
		var output	= $(options.output);
		var alt = tabs.attr("href");

		new jQuery.featureList(tabs, output, options);

		return this;	
	};

	$.featureList = function(tabs, output, options) {
		function slide(nr) {
			if (typeof nr == "undefined") {
				nr = visible_item + 1;
				nr = nr >= total_items ? 0 : nr;
			}

			tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

			output.stop(true, true).filter(":visible").fadeOut();
			output.filter(":eq(" + nr + ")").fadeIn(function() {
				visible_item = nr;	
			});
		}

		var options			= options || {}; 
		var total_items		= tabs.length;
		var visible_item	= options.start_item || 0;

		options.pause_on_hover		= options.pause_on_hover		|| true;
		options.transition_interval	= options.transition_interval	|| 1000;

		output.hide().eq( visible_item ).show();
		tabs.eq( visible_item ).addClass('current');

		tabs.click(function() {
			if ($(this).hasClass('current')) {
				return false;	
			}

			slide( tabs.index( this) );
		});

		if (options.transition_interval > 0) {
			var timer = setInterval(function () {
				slide();
			}, options.transition_interval);

			if (options.pause_on_hover) {
				tabs.mouseenter(function() {
					clearInterval( timer );

				}).mouseleave(function() {
					clearInterval( timer );
					timer = setInterval(function () {
						slide();
					}, options.transition_interval);
				});
			}
		}
	};
})(jQuery);

::HTML::
Code:
<html>
<head>
<title>FeatureList</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="test.js"></script>
	<script language="javascript"> 
		$(document).ready(function() {
			$.featureList(
				$("#selectionbar a"),
				$("#picture img"), {
					start_item	:	0
				}
			);
		});
	</script>
	<style type="text/css">
		#featureList 
		{
			width: 850px;
		}
		#picture
		{
			width: 850px;
			height: 269px;
			overflow: hidden;
		}
		#selectionbar .selector
		{	
			width: 15px;
			height: 15px;
			background: url(http://www.acegames.us/forum/images/smilies/sad.gif) no-repeat;
			float: left;
			margin-left: 10px;
			margin-top: 7px;
		}
		#selectionbar a.current 
		{
				background: url(http://www.saabiklubi.ee/foorum/images/smilies/biggrin.gif) no-repeat;
		}		
		#selectionbar
		{ 
			background: url(http://www.eventintegration.com/images/bottom_bar.jpg) no-repeat;
			width: 850px;
			height: 28px;
		}
	</style>
</head>
<html>
<body><center>
	<div id="featureList">
		<div id="picture">
			<a href="#">
				<img src="http://www.a1linepainting.com/*site/scaled-images/web/images/mid-jpg-850x242.jpg?nxg_versionuid=published" alt="" width="850" height="242px" style="padding-top: 25px" />
			</a>
			<a href="#">
				<img src="http://fc00.deviantart.net/fs71/f/2010/091/b/3/Magic_M16_by_commandercody92.jpg" alt="" width="850" height="242px" style="padding-top: 25px" />
			</a>
			<a href="#">
				<img src="http://www.jbtreesllc.com/PageImages/Sepia-IndexImage-TreesTop-third-850x242.jpg" alt="" width="850" height="242px" style="padding-top: 25px" />
			</a>
			<a href="#">
				<img src="http://av-folio.net/Files/1295603162.jpg" alt="" width="849" height="242px" style="padding-top: 25px" />
			</a>
		</div>
		<div id="selectionbar">
			<a class="selector" href="#"></a>
			<a class="selector" href="javascript:;"></a>
			<a class="selector" href="javascript:;"></a>
			<a class="selector" href="javascript:;"></a>
		</div>
	</div>
	</center>
</body>
</html>
Any suggestions? Maybe I'm better off finding a new script online to better suit my needs i'm not sure.