How To Code Sliding Image Navigation

Lately I have been seeing some nifty "sliding image" navigation on a number of websites.  Probably the best use of it I've seen is on the Huffington Post, where it appears on most sub-pages--just one example here:
http://www.huffingtonpost.com/2008/11/10/what-your-choice-of-drink_n_142748.html
It's the horizontal menu of images, showing three images at a time, and a user clicks on an arrow in either direction to move the menu left/right by one image per click.  When I first saw this, I assumed it must have been Flash, but the source code indicates it was actually done in Javascript.  My question is:  is there a web genius out there in Experts Exchange who can help me replicate this functionality?  And I do mean "replicate" in that, if you know how to do it in Javascript, that's great, but if I can essentially do the same thing using DHTML (show-hide layers, whatever) or another technology, I'd be just as happy--it's the end result that's most important to me!  I concede that the JS code below might well show exactly how it's done, but I am clueless enough in JS that I would need someone to hold my hand through it to explain how I could make my own graphic/menu work with this code!
This appears to be the relevant code:
 
<div class="clear"></div>
			<div id="threeup_top_wrapper">
				<div id="threeup_left_nav" class=""><a href="#" onclick="Y.threeup.right(); if (urchinTracker) urchinTracker('/t/a/threeupnav.v1/left.v2/Living'); return false;"><img src="/images/v/threeup/left_big.gif" border="0"></a></div>
				<div id="threeup_wide_container" style="position:relative">
					<div id="threeup_featured_content"><!-- this content will be replaced --></div>
				</div>
				<div id="threeup_right_nav" class=""><a href="#" onclick="Y.threeup.left(); if (urchinTracker) urchinTracker('/t/a/threeupnav.v1/right.v2/Living'); return false;"><img src="/images/v/threeup/right_big.gif" border="0"></a></div>
			</div>
			<div style="clear: both; border-bottom: 1px solid #ddd; padding-bottom: 0px;"></div>
			<br/>
			<script>
				function threeup_js()
				{
					var callback = {
						success: function(o) { $("threeup_featured_content").innerHTML = o.responseText; Y.threeup.init()},
						failure: function(o) { return; }
					};
					var url = '/threeup.php?threeup=yes&VerticalName=Living&entry_id=142748&v=1';
					var currentTime = new Date();
					var co = YAHOO.util.Connect.asyncRequest('GET', url + '&h=' + currentTime.getHours(), callback);
				}
				threeup_js();
			</script>

Open in new window

tomstrawAsked:
Who is Participating?
 
David BruggeConnect With a Mentor Commented:
Hi tom!

It looks like you are ready to take that step up from html to ajax.

Truth be told, it is not all of the effects called ajax are really and truly AJAX, but the use of javascript to slide images in an out and open and close windows has become know as ajax.

The javascript itself is rather basic, and after you lean the basics, you can usually muddle through. The good news is that you don't have t know much about javascript to get started. Just so that you know what people are referring to when you search for this on the web, know that javascript lets you write your own definitions for functions. This means that someone can take the basic core javascript and add a lot more features to it.

A number of groups have done this and each have their fans. They each write modules and components that work with their extended version of javascript. The some of the most popular are Scriptaculous, Prototype, MooTools, and JQuery (I know that I am going to make someone mad because I left out their favorite framework) Adobe has their own that you can access from inside of Dreamweaver CS3+ called Spry.

The Menu that your are referencing is known generically as a "sideshow" because it is based on the code originally written to be able to navigate back and forth among a group of images.

My own personal opinion is that Scriptaculous is the best place to start for a beginner. It has a very active following and its beginner tutorials and forums are among the easiest to follow.

To get an idea of what I am talking about with ajax, go to a place like http://www.ajaxdaddy.com/ or http://www.ajaxrain.com/library.php?sort=&page=1&limit=30. If you are using Dreamweaver, take a look at http://labs.adobe.com/technologies/spry/home.html

Here are some links:
http://script.aculo.us/
http://www.prototypejs.org/
http://mootools.net/
http://jquery.com/

there are also:
http://developer.yahoo.com/yui/   and
http://code.google.com/webtoolkit/

I know that this isn't the easy answer that you were looking for, but it is where you were going to end up eventually.

Best of luck to you
David B

0
 
dbruntonConnect With a Mentor Commented:
0
 
tomstrawAuthor Commented:
Sorry about delay in responding guys; I was out for the holidays and then some personal things kept me away.  I wasn't thinking in terms of easy or hard, but rather just getting pointed in the right direction, and these answers will do the trick nicely.  Thanks!

T
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.