How To Code Sliding Image Navigation

Posted on 2008-11-11
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

    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 or If you are using Dreamweaver, take a look at

    Here are some links:

    there are also:   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 47

    Assisted Solution


    Author Comment

    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

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
    This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
    In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
    Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now