Jump to content

Addition to Feature List


Howdy_McGee
 Share

Recommended Posts

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:::java script::

/* * 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::

<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="java script:;"></a>			<a class="selector" href="java script:;"></a>			<a class="selector" href="java script:;"></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.

Link to comment
Share on other sites

Well I'm trying to cycle through text as the feature list cycles through categories. Since the feature list already cycles through images and links at the same time (in sync with one another) I just want to describe the category more. I tried calling 2 of the same function and just making another feature list which would have suited my needs, but I guess it's calling the function on load and one function was overriding the other which ended up breaking the javascript.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...