Jump to content

Addition to Feature List

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><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.

Share this post

Link to post
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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...