Howdy_McGee Posted April 13, 2011 Share Posted April 13, 2011 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 More sharing options...
justsomeguy Posted April 13, 2011 Share Posted April 13, 2011 The problem is getting it to sync with the feature list.Can you be more specific? Link to comment Share on other sites More sharing options...
Howdy_McGee Posted April 14, 2011 Author Share Posted April 14, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.