can anyone assist with modding this javacript slideshow behaviour?

buglawton

The folk who do the scripting for our website are on holiday for some weeks, plus they are quoting what I think to be a high price for a minor mod to our javascript, eg £50 to £60.

I want to improve the slide-show for example on this page:
http://www.bb-china.com/book-online/html_pages/pid8_english.html

Currently you have to mouse over the chevrons at the edges of the slides to make it move.

1. Ideally, I'd like it to execute a slide-to-the right of the images automatically once the page has loaded. Surely this is a small change? I tried adding onload="move_right();" but cannot find the right place to insert it to make it work.

2. Eventually I'd like to change it so that it's a permanently moving conveyor belt of images. Then if you mouse over the images they stop moving and clicking an image pops it up larger (as now). Surely this small change to the below template script?

Any suggestions for a fix, even a 'quick and dirty' one, would be appreciated!


Details:
======
The below script is loaded in from a template. I can edit this template but the page itself gets generated (so I cannot easily control what comes just after the "body" tag - it is possible to edit the generated page per the link above manually though not so convenient).

<td align="center">
<table width=500px cellpadding=0 cellspacing=0 style='height:102px' class=configuration >
<tr>
<td width="10px" valign="top" class='red'></td>
<td width=10px style='' align=center rowspan=2 valign="middle">
<span style='color:yellow;cursor:pointer' onmouseOver="move_left();" onMouseOut="clearTimeout(tid)">«</span>
</td>
<td rowspan=3 valign="middle"><div id=container style='break:none;width:810;overflow:hidden;clip:0 97 810 0;height:97px;position:relative'><div id=prod style='position:relative;left:0px;'><%picture_multiple2%></div></div></td>
<td width=10px style='' align=center rowspan=2 valign="middle">
<span style='color:yellow;cursor:pointer' onmouseOver="move_right();" onMouseOut="clearTimeout(tid)">»</span>
</td>
<td width="10px" valign="top" align=right class='red'></td>
</tr>
<tr>
<td align=left class='red' valign="bottom"><img src='tpl/visit/redstyle/images/x_ld.gif'></td>
<td align=right class='red' valign="bottom"><img src='tpl/visit/redstyle/images/x_rd.gif'></td>
</tr>
</table>
</td>

And further down the template:

---

function move_right()!!
var c=document.getElementById('prod');
var d=document.getElementById('container');

if (parseInt(c.style.left)+gCW(c)>d.offsetWidth)!!

c.style.left=parseInt(c.style.left)-2;
tid=setTimeout("move_right()",1);
}
}
function move_left()!!
var c=document.getElementById('prod');
var d=document.getElementById('container');

if (parseInt(c.style.left)<0)!!

c.style.left=parseInt(c.style.left)+2;
tid=setTimeout("move_left()",1);
}

RichPyke

Two things...

1. The website's code is messed up somewhere to start with hence the "onload="move_right();" " at the top of the page. This would show that you have edited thte page incorrectly, remove it...

2. That script is a free script called lightbox, google it, you may find some free mods to do what you want it to do.

Actually, a 3rd thing, sack your web designers... they overcharge for stuff that's not even written by them.

I haven't had chance to take a proper look at it but when I got 5 mins I'll have a better look, but the FREE option is to google lightbox


Oh, maybe a few more than 2 things...

Check out http://validator.w3.org/check?uri=http%3A%2F%2Fbb-china.com%2Fbook-online%2Fhtml_pages%2Fpid8_english.html&charset=%28detect+automatically%29&doctype=Inline&group=0 it will tell you how much your site complies with XHTML, yours has 178 errors... really, sack your designers and find some good ones.