How To Code Sliding Image Navigation

Posted on 2008-11-11
Medium Priority
Last Modified: 2013-12-25
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:
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 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 style="clear: both; border-bottom: 1px solid #ddd; padding-bottom: 0px;"></div>
				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);

Open in new window

Question by:tomstraw
LVL 26

Accepted Solution

David Brugge earned 1800 total points
ID: 22936916
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:

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

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

LVL 50

Assisted Solution

dbrunton earned 200 total points
ID: 23023800

Author Comment

ID: 23096955
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!


Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question