JavaScript - Browser Navigation Demonstrator

This navigation is going to be the death of me, and I think I'm sliding back to noob status....

I've done a navigation, that works just wonderfully. There are three dropdowns in the top row, and one down below. The three on the top populate the one below it.

The nav js script goes as follows:

Code:

var cacheobj=document.dynamiccombo.stage2

function populate(x){
for (m=cacheobj.options.length-1;m>0;m--)
cacheobj.options[m]=null
selectedarray=eval(x)
for (i=0;i<selectedarray.length;i++)
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
cacheobj.options[0].selected=true
}



populate(combo1)

The upper three dropdowns are set up like so:

Code:

<select name="usstage1" size="1" onchange="showDiv(this.value);window.open(this.options[this.selectedIndex].value,'_top');" >
        <option selected="selected" value="javascript:populate(combo1)">United States</option>
        <option value="javascript:populate(combo2)">Alabama</option>
        <option value="javascript:populate(combo3)">Alaska</option>
        <option value="javascript:populate(combo4)">Arizona</option>
        <option value="javascript:populate(combo5)">Arkansas</option>
        <option value="javascript:populate(combo6)">California</option>
etc...

Which populates the bottom dropdown with the locales of that area.

Once an option is selected in the bottom dropdown, it goes to the respective page depending on selection.

So if you select California from the upper list, the dropdown below populates the list of cities. If you select Los Angeles, it navigates to the LA page. So...none of this is the problem...the problem is, I need it to keep the last selected state of all 4 dropdown boxes as it changes pages...

I went with a couple different cookie options and failed miserably. One of them messed it all up by populating the top three boxes with the position of the last selected state of the "city" dropdown. So if I chose LA, it selected from the top 3 boxes the 5th position in their menu and then populated it with that area...anywho....

Help, a solution, or a positive kick in the bum in the right direction would be truly appreciated.

Hi all,

I wasn't sure of the proper search terms to use to find an answer in the JS forums. I'm trying to create a floating navigation bar which only becomes visible at a certain scroll point on a page - specifically, when the static navigation row is scrolled out of view.

I have a floating navigation bar already. And I suspect I'd need to give the static menu an ID to reference in the JS. I'm just not certain on how to proceed.

Any help would be greatly appreciated. Thanks.

Hello,

I'm working on a page navigation script and i'm stuck at a part.

I have made a little picture gallery script and my team partners can fill in how many folders they want to show on a page.

So example i have 5 folders and want to show 2 folders per page i tried to use code like this

var totalFolderPages = 1;

if ((parseInt(pageCounter) / parseInt(totalFoldersPerPage) % 1 == 0)) {

totalFolderPages++;

}

I'm still a bit new in coding and don't know how i can create a working solution for my page navigation.

Some help would be great

Hi forums,

I'm building a website for my class and one of the things I was planning on doing is building a navigation where when you hover over the mouse, depending on which side, I wanted the content to scroll from that particular direction. The problem is, I am terrible at Javascript. I have nothing to work with, just the idea.



This is an illustration to what I was referring to. Is there a term for this? All I really need is just something to work with, a redirect to an existing example that vaguely captures this idea along with the source is fine. I tried finding myself, but I only found and worked with one Javascript navigation and it didn't do what I was expecting to do.

Any assistance is highly appreciated.

hello, would anyone be able to share with me a concept of how to build a vertical navigation bar that allows you to hover over the section and a hidden area with links would appear?
thank you

Can anyone show me the code for a simple expanding navigation bar? I need to roll over the nav bar and for it to drop down with more options.

I know the code will be straight forward, I can't work it out though.

Thanks whoever can help = )

Hi guys,

I have a javascript drop-down navigation bar on my website. While I am creating the website, the drop-down have no problem overlaying the javascript (embed with flash) photo gallery in Firefox. But when I tested it in IE, it did not overlay the javascript script and the drop-down was covered by the photo gallery instead.

I tried methods like Z-index, using Div etc but it still doesn't work on Internet Explorer. I tested on Safari, Opera and Firefox doesn't seem to have any problem. Here is my links to my CSS use for my website. Really need help, have no idea what I did wrong. Can anyone advise me what to do? Thank you so much!!!! Much appreciated!!!

Working Website:
http://17thstop.sg/demo

CSS Files:
http://17thstop.sg/demo/styles.css
http://17thstop.sg/demo/css/default.advanced.css
http://17thstop.sg/demo/css/default.css
http://17thstop.sg/demo/css/dropdown.css

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- #BeginTemplate "index.dwt" -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" ></link>
<link rel="icon" type="image/gif" href="animated_favicon1.gif" ></link>
<title>Four Musketters Studio</title>

<script type="text/javascript" src="gallery/swfobject.js"></script>

<!-- Menu CSS and JS -->
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<!-- End of Menu and JS -->

</head>

<body>
	<div id="content">
		<h1><a href="index-blueprint.htm"><span>Four Musketeers</span> Studio</a></h1></div>

<!-- Start of Menu -->	
<div id="contentmenu"><ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="index.htm">Home</a></li>
	<li class="dir">About Us
		<ul>
			<li><a href="about_us.htm">The Four Musketters</a></li>			
			<li class="dir">The Team
				<ul>
					<li><a href="darren.htm">Darren</a></li>
					<li><a href="jon.htm">Jonathan</a></li>
					<li><a href="hweek.htm">Hwee Key</a></li>
					<li><a href="gavin.htm">Gavin</a></li>
				</ul>
			</li>
			<li><a href="./">Clients</a></li>
			<li><a href="./">Testimonials</a></li>
			<li><a href="./">Press</a></li>
			<li><a href="./">FAQs</a></li>
		</ul>
	</li>
	<li class="dir">Services
		<ul>
			<li><a href="cne.htm">Event & Commercial Photography</a></li>
			<li><a href="portrait.htm">Portrait Photography</a></li>
			<li><a href="wedding.htm">Wedding Photography</a></li>
			<li><a href="studio.htm">Rental of Studio</a></li>
			<li><a href="./">Training &amp; Consulting</a></li>
		</ul>
	</li>
	<li><a href="gallery3/gllery.htm">Gallery</a></li>
	<li><a href="./">Events</a></li>
	<li><a href="./">Careers</a></li>
	<li><a href="./" class="dir">Contact Us</a>
		<ul>
			<li><a href="contact.htm">Enquiry Form</a></li>
			<li><a href="locationc.htm">Contact Us & Location</a></li>		
			</ul>
	</li>
</ul>
</div>
<!-- End of Menu -->

<div id="content1">

	<!-- #BeginEditable "BodyContent" -->

	<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>	
	<!-- #EndEditable -->
	<script type="text/javascript">
		var fo = new SWFObject("gallery/autoviewer.swf", "autoviewer", "100%", "100%", "8", "#181818");
			fo.addVariable("xmlURL", "gallery/gallery.xml");		
				
		//Optional Configuration
		//fo.addVariable("langOpenImage", "Open Image in New Window");
		//fo.addVariable("langAbout", "About");	
		//fo.addVariable("xmlURL", "gallery/gallery.xml");					
		
		fo.write("flashcontent");	
		
	</script></div>


			<div id="footer">
				<p id="links">
				Copyright &copy; 2010 &minus; Four Musketters Studio &middot; Your Number 1 Choice.
				</p>
				<p>
					<a href="#">Home</a>
					<a href="#">Practice</a>
					<a href="#">Attorneys</a>
					<a href="#">Accidents</a>
					<a href="#">News</a>
					<a href="#">About Us</a>
					<a href="#">Contact Us</a>
				</p>
			</div>

</body>

<!-- #EndTemplate -->

</html>

Hi - I hope someone can help me out, I've pored over this problem for hours.

The site is http://www.spacemodel.com. A doctype is set.

The CSS for the navmenu is:

Code:

#menu

{

	background:#262626 url(images/menu_bg.gif) repeat-x top;

	border-bottom:1px solid #230808;

	margin:0 20px;

	height: 49px;

	overflow: hidden;

}

#menu .mleft{background: url(images/menu_side.gif) no-repeat left; width: 100%; height: 100%;}

#menu .mright{background: url(images/menu_side.gif) no-repeat right; width: 100%; height: 100%;}

#menu ul

{

	

	width:960px;

	height:100%;

	overflow:hidden;

}



#menu ul li

{

	list-style:none;

	font-family:Arial, sans-serif;

	font-weight: 700;

	line-height: 49px;

	color:#E6E6E6;

	font-size:11px;

	text-transform:uppercase;

	text-align:center;

	background:url(images/menu_side.gif) no-repeat right 0;

	

	margin:0 0 0 25px;

	padding: 0 25px 0 0;

}



#menu a:link,#menu a:visited,#menu a:active,#menu a:hover

{

	color:#E6E6E6;

	text-decoration:none;

}

Works fine in all other browsers and versions. Affects about 5% of visitors, but one is my client

All help and insight appreciated!

Laurie

due to the version of dreamweaver i have (MX-2004) i have had to hand code a drop down menu myself however i have come across a problem.

i'm not sure if the problem is in the Javascript, HTML, or CSS however here go

when ever i hover over the menus dont drop down they cascade up and the other problem is that when ever i hover over one of the buttons a menu from another pops up and not the one that should.

here is the codes so you can have a look

javascript:
Code:

<script type="text/javascript">

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

function mopen(id)
{	

	mcancelclosetime();

	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}

function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

document.onclick = mclose; 
</script>

HTML code
Code:

<table align="center" width="950px" border="0" cellpadding="0">
  <tr>
  	<td height="50">
	<div align="center">
        <table width="100%" border="0" cellpadding="2" cellspacing="0">
          <tr>
            <td width="100%" height="48" align="center" bgcolor="#CF8D72">
              <ul id="sddm"><li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<!-- travel guides drop menu -->
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Guides</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
    	<a href="#">Africa</a>
		<a href="#">Asia</a>
		<a href="#">Australia</a>
		<a href="#">Europe</a>
		<a href="#">North America</a>
		<a href="#">South America</a>
		<a href="#">Vesas</a>
		<a href="#">Carnas</a>
		<a href="#">Driving Over Sea</a>
        </div>
    </li>
	<!-- adventures drop menu -->
	<li><a href="#"
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Adventures</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">up & coming Adventures</a>
		<a href="#">The Team</a>
		<a href="#">the Journey</a>
		<a href="#">pod casts</a>
		<a href="#">Photo Gallery</a>
        </div>
    </li>
	<!-- travel news drop menu -->
	<li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Travel News</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
    	<a href="#">Advice</a>
		<a href="#">Destinations</a>
		<a href="#">Holidays</a>
		<a href="#">Cities</a>
		<a href="#">Cruses</a>
		<a href="#">Hotels</a>
		<a href="#">Snow & skis</a>
		<a href="#">Expats</a>
		<a href="#">Watch Dog</a>
        </div>
    </li>
    <li><a href="#">Forum</a></li>
	<li><a href="#">Chatroom</a></li>
	<li><a href="#">Travel Shop</a></li>
</ul>
<div style="clear:both"></div>
</td>
          </tr>
        </table>
   </div></td>

and the CSS
Code:

#sddm
{ 
	width: 99%;
	margin:'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 0px
	font-weight: bold;
	z-index: 30
}

#sddm li
{	
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: "Baskerville Old Face", Baskerville, "Times New Roman" bold 11px; 
}

#sddm li a
{	
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 90px;
	background: url(/images/navigation/chromebg4.gif) center center repeat-x;
	color: #000000;
	text-align: center;
	text-decoration: none;
}

#sddm li a:hover
{	
	background: url(image/navigation/chromebg4-over.gif) center center repeat-x;
}

#sddm div
{
	position:absolute;
	top: 0;
	border: 1px solid #E8BEBE;
	border-bottom-width: 0;
	font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px;
	line-height:18px;
	z-index:100;
	background-color: white;
	width: 140px;
	visibility: hidden;
	height: 296px;
}

	#sddm div a
	{	
		position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: "Baskerville Old Face", Baskerville, "Times New Roman" 13px bold;
	}

	#sddm div a:hover
	{	background-color: #FFECEC;
		color: #000000;}

Hi guys,

This is the first site I have tried to make with Javascript because I thought it was about time I learned it properly. Apologies if my code is extremely ugly. Suggestions are more than welcome.

I have a single large page that the Javascript controls so the viewing screen 'focuses' on the div referenced by the link. It is a 3x3 array of divs with each div being its own 'page' as far as the user is concerned.
It would be nice if it worked something like this site only with the links inside each 'pages' div instead of around the outside in a separate frame. I looked at their code and realised it would work well for what I wanted with some modifications (it is a free code tutorial thing so no rage). Turned out it basically needed to be re-written.

The navigation I am using works fine so long as the links on the central 'home' div are used but as soon as I copy + paste the working code into one of the other divs they cease to work as links, they still appear but they don't do anything while the ones on the 'home page' still work fine.
I have no idea why but I feel like it might have something to do with object oriented coding. I read the two posts on the subject in the FAQ's and can understand the difference between the two styles but don't really know where to go from here.

The relevant html code goes like so:
Code:

             
<div id="one" class="elements">
   <div class="block25">
     <span class="go1"><img src="images/go1.png" alt="One"><h4>ONE</h4></span>
   </div>

While the javascript is as thus:
Code:

$('.go1').click(function(){
 $('#one').click();
 });

 $('#one').click(function(){;
 	currentId = $('selected').attr('id');
	goId = section[0][0];
	$target = $('div[id=' + goId +']');
	$paneTarget.stop().scrollTo($target, 800, { margin: true } );
	$('div[id=' + currentId +'], div[id=' + goId +']').toggleClass('selected');
});

I tried making separate function names for each div's links and calling them something like go11, go12, etc but that didn't seem to fix anything. I just realised that I only duplicated and renamed the first part of the code eg. Code:

$('.go12').click(function(){
 $('#one2').click();
 });

and not the rest. I suppose if I did all of it, the navigation would probably work but I would have 9x more code than I have right now.
Edit : Turns out it still doesn't work. I am incredibly stumped by this.
Why would it not work even if the function names are different? The only thing that is remaining the same is the div id that is being referenced and animated to.

How difficult would it be for me to convert what I have into object oriented code? Would this even be what I need to do?

If anyone can help me out then I would be really grateful. Thanks!
I know I should take the time to go through tutorials and learn it properly but this site is supposed to be part of a project for uni that is due soon so I don't really have the time. Later I will do some more learning and figure it all out.


I'm also wondering how I would go about applying easing to the animation between div's. Should I use some sort of jQuery library or some custom code like this article suggests?

Hi All

I'm using the fantastic turtorial here for my site navigation:

http://css-tricks.com/6336-dynamic-p...acing-content/

It's all working wonderfully but I've hit a major stubmling block. After the new page is loaded it won't load an scripts. E.g. I'm using scripts for expanding divs, galleries, contact forms etc and they simply don't run after the page transition

Let me know if you need a link to my project

I'm aware the page isn't actually 'refreshed' so I'm asuming they wont fire the standard way by having the script tags in the header (Please correct me if I'm wrong) So my question is how can I get them working once the new page is loaded?

Script below:

Code:

$(function() {

    var newHash      = "",
        $mainContent = $("#right"),
        $pageWrap    = $("#wrap"),
        baseHeight   = 0,
        $el;
        
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $pageWrap.height();
    
    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });
    
    $(window).bind('hashchange', function(){
    
        newHash = window.location.hash.substring(1);
        
        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });
        };
        
    });
    
    $(window).trigger('hashchange');

});

All help is appreciated
Thanks in advance

Craig

Hi, I'm building an html web page (no flash) and was wondering if it was possible to fade (or slide up from the horizontal rule) my navigation links into the page, one after the other, for the home page only, and ideally only for the first session visit. Aside from looking cool, I think it will draw the attention of the visitor and let them know where their main links are. I've experimented with animated .gif's, but not only was the implementation buggy, it didn't give me the flexibility to quickly edit the links.

I'm thinking some sort of JavaScript (or css?) can accomplish this, but I don't know the first thing about writing JavaScript and I couldn't find any script on the web. Does anyone know if such a script does exist, or if there's a better way I should go about doing this? Thanks!

Here's the structure for my main index:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="templates/styles.css">

<title>Test</title>

</head>

<body class="main">

<center>
<table border="0" cellspacing="0" cellpadding="0" width="800" class="header">
	<tr>
		<td align="left" valign="bottom" width="455" height="45"><a href="index.html" class="nav"><img src="images/logo.png" alt="Logo"></a></td>
		<td align="right" valign="bottom" width="146" height="45"> <a href="link1/index.html" class="nav">Link1</a> </td>
		<td align="right" valign="bottom" width="103" height="45"> <a href="link2/index.html" class="nav">Link2</a> </td>
		<td align="right" valign="bottom" width="96" height="45"> <a href="link3/index.html" class="nav">Link3</a> </td>
	</tr>
	<tr>
		<td align="center" valign="top" width="800" height="10" colspan="4"><hr noshade></td>
	</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="800">
	<tr>
		<td width="800" height="10"></td>
	</tr>
	<tr>
		<td align="center" valign="top" width="800" height="440">
		CONTENT WILL GO HERE
		</td>
	</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="800">
	<tr>
		<td align="center" valign="bottom" height="45" class="footer">
		<hr noshade>
		</td>
	</tr>
</table>

</center>
</body>
</html>

I found the effect I would like to achieve here, but the code doesn't allow me to make turn the text into links, and I would like to leave the links where they are in the html and maybe the JavaScript could call each link by id?
http://www.codingforums.com/showthre...072#post923072
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    width:600px;
    margin:auto;
 }
#container p{
    height:100%;
 }
#p4 {
    font-family:'times new roman',serif;
    font-size:18px;
    color:#006;
    text-align:justify;
 }
</style>

<script type="text/javascript">
  var lines=new Array();
      lines[0]='text1';
      lines[1]='text2';
      lines[2]='text3';
      lines[3]='text4';
      lines[4]=
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.'+ 
'Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus '+ 
'nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. '+ 
'Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, '+ 
'nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,'+  
'ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate '+ 
'ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta '+ 
'bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.';
  var c=0;
  var value=0;
  var speed=20;

function addLines() {
if(c>=lines.length) {
   return;
}
   par=document.createElement('p');
   par.setAttribute('id','p'+c);
   par.appendChild(document.createTextNode(lines[c]));
   document.getElementById('container').appendChild(par); 
   setOpacity();
}

function setOpacity() {
   obj=document.getElementById('p'+c);
if(value>100) {
   value=0;
   c++;
   return addLines();
 }
if(obj.filters) {
   obj.style.filter='alpha(opacity='+value+')';
 }
else {
   obj.style.opacity=value/100;
 }
   value++;
setTimeout('setOpacity()',speed);
 }

window.onload=function() {
   addLines();
 }
</script>

</head>
<body>

<div id="container"></div>

</body>
</html>

Hi,

I am fairly new to using Javascript and even more so as to customizing it.

At the moment I am using the gfslideshow from Google to display images from an Atom feed.

The gfslideshow has it's own built in 'ControlPanel' to navigate forwards or backwards through the images.

There is however an option to use 'Programmatic Navigation', basically to enable you to use custom buttons of your own. In the instruction file it shows a snippet:-

Code:

<script type="text/javascript">

  /**
   * utilize the programmatic navigation
   */
  var ss = new GFslideShow(feed, 'slideShow');
  ss.goForward();  // Moves to the next photo
  ss.goBackward(); // Moves to the previous photo.
  ss.gotoIndex(0); // Moves to the first photo.
  ss.pause(false); // Pause without displaying the pause image.
  ss.resume();     // Resume play.

</script>

My problem is that I have no idea where this code should be placed or how to enable my buttons to implement it.

Here is the code that displays my slideshow:-

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Google AJAX Feed API - AJAX Slide Show Sample</title>
  <script src="http://www.google.com/jsapi?key=ABQIAAAAdXY4YGnPM39v1Lv2PEPq3hQUc0oA3FIK-VaTr4wYHCswBA8omhS0HGRy2q30MG8a11y5-1rkUGhClg" type="text/javascript"></script>
  <script src="gfslideshow.js"
    type="text/javascript"></script>

  <style type="text/css">
    .gss a img {border : none;}
    .gss {
      width: 400px;
      height: 400px;
      background-color: #ffffff;
      padding: 4px;
      margin: 0 auto;
      border-top: 2px solid #000000;
      border-left: 2px solid #000000;
      border-right: 2px solid #000000;
    }
    
    #container {
    	width: 400px;
    	height: 40px;
    	background-color: #ffffff;
    	padding: 4px;
    	margin: 0 auto;
    	border-bottom: 2px solid #000000;
    	border-left: 2px solid #000000;
    	border-right: 2px solid #000000;
    }
    
    .capstyle {
    	width: 400px;
    	height: 40px;
    	FONT-SIZE: 16px;
    	COLOR: #000000;
    	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    	text-align: center;
    	font-weight: bold;
    	padding-top: 8px;
    	}
    
     #imgsleft 
      {
      	width: 40px;
      	height: 40px;
        float: left;
        
        }
      
     #imgsright
      {
      	width: 40px;
      	height: 40px;
        float: right;
        
        }
      
     </style>
  
  <script type="text/javascript">
    function load() {
      var samples = "http://www.redbubble.com/people/madtogger/portfolio/recent+art.atom";
      
      var options = {
      	
      	thumbnailUrlResolver : USR_resolver,
      	scaleImages : true,
        fullControlPanel : false,
        fullControlPanelSmallIcons : false,
        fullControlPanelCursor : false,
        displayTime: 2000,
        transistionTime: 500,
        transitionCallback: myTransitionHandler,
        
        linkTarget : google.feeds.LINK_TARGET_BLANK
      };
   new GFslideShow(samples, "slideshow", options);
   
       function USR_resolver(entry){ // Declares the function, expecting one param: entry
       var content=entry.content; // Provides an easier handle for the entry object's content property 
       var start=content.indexOf("src=")+5; // Searches the content tag for the text "src=", gets index for use below 
       var stop=content.indexOf(".jpg",start)+4; // Searches the content tag for the text ".jpg?", gets index for use below 
       var thumburl = content.substring(start,stop); // Uses indexes found above to parse thumburl from content element 
       return(thumburl);} // Returns the thumburl
       
       ss.goForward();  // Moves to the next photo
       ss.goBackward(); // Moves to the previous photo.
      
       function myTransitionHandler(entry, transitionTime) {
       var id = document.getElementById("caption");
       id.innerHTML = entry.title;}
       }   
    
google.load("feeds", "1");
    google.setOnLoadCallback(load);
    
  </script>
  
  </head>

<body bgcolor="gray">
 
  	
    
    <div id="slideshow" class="gss">Loading...</div>
    
  
  	  <div id="container">
  	  	
  		<div id="imgsleft"><img src="prev_off.png" onClick="ss.goBackward()"></div>
  		
  		
  		<div id="imgsright"><img src="next_off.png" onClick="ss.goForward()"></div>
      
      
      <div id="caption" class="capstyle"></div>
      
      <div style="clear:both;"></div>
      
      </div>
  
  
 
</body>
</html>

The slideshow can be viewed he - My SlideShow

I have posted on the Google API forum but no-one seems to answering.

Any help would be appreciated.

Kind regards..,

MT