PDA

View Full Version : Slide Show Help - Determine by number

deathmill
09-02-2003, 10:09 AM
Hi,

I've put together this slide show script that works fine with forwards and backwards buttons. But what I want to do is enable it so that the user can click either 1, 2, 3, 4, 5 and for it to show or jump to that slide.

Script below and thanks in advanced - DeathMill

<body>


<div style="position:absolute; top:0px; left:0px; display:none; z-index:0;">

<div id="Promo1">1</div>
<div id="Promo2">2</div>
<div id="Promo3">3</div>
<div id="Promo4">4</div>
<div id="Promo5">5</div>

</div>

<div id="PlaceToUpdate"><div id="Promo1">1</div></div>

<div>
<table width=246 cellpadding="0" cellspacing="0" border="0">
<tr>
<td width=11>
</td>
<td width=235 align="right" bgcolor="#FF0000">
<a href="javascript:navigate('Reverse');">
<IMG alt=Reverse src="*.gif" width=20 height=19 border=0 name=rev></A>
<a href="javascript:navigate('Forward');">
<IMG alt=Forward src="/*.gif" width=21 height=19 border=0 name=fwd></A>
</td>
</tr>
</table>
</div>

<a href="javascript:navigate('1');">1</a> - <a href="javascript:navigate('2');">2</a> - <a href="javascript:navigate('3');">3</a> - <a href="javascript:navigate('4');">4</a> - <a href="javascript:navigate('5');">5</a>

<script language="JavaScript">
<!--

var i=0;
var myPromos=new Array();
myPromos[0]=document.getElementById('Promo1').innerHTML;
myPromos[1]=document.getElementById('Promo2').innerHTML;
myPromos[2]=document.getElementById('Promo3').innerHTML;
myPromos[3]=document.getElementById('Promo4').innerHTML;
myPromos[4]=document.getElementById('Promo5').innerHTML;


// Updater function
function updateID() {
if (document.getElementById) {
document.getElementById('PlaceToUpdate').innerHTML = (myPromos[i]);
}
}

// Dynamic ticker controls
function navigate(direction) {

if (direction == "Reverse") {
i--;
if (i < 0) i = myPromos.length-1;
updateID();
}
if (direction == "Forward") {
if (i < myPromos.length-1)
i++;
else i=0;
updateID();
}
}

//-->
</script>

</body>
glenngv
09-02-2003, 10:28 AM
your codes can be optimized but here's the fastest fix...

// Dynamic ticker controls
function navigate(direction) {

if (direction == "Reverse") {
i--;
if (i < 0) i = myPromos.length-1;
}
else if (direction == "Forward") {
if (i < myPromos.length-1)
i++;
else i=0;
}
else {
i = parseInt(direction,10) - 1;
}
updateID();
}
deathmill
09-02-2003, 02:24 PM
Thanks for this - was wondering how hard it would be to track when link is active and change an image to that relevant promo.

Example: Page loads and I have IMAGE 1 highlight red, I then Click Forward and IMAGE 2 becomes highlight red and IMAGE 1 becomes highlight green. Its just so you know what slide you are on.

<a href="javascript:navigate('1');">IMAGE 1</a>

<a href="javascript:navigate('2');">IMAGE 2</a>

<a href="javascript:navigate('Forward');">Forward</a>

Thanks,

D :thumbsup:
deathmill
09-04-2003, 12:37 PM
Hi,

I have added an updated element to the script, which changes the image when clicked which updates the layer. Only now how can I have it so when I use the < | > to change the slide it also updates the image as well between the two?

Thanks again - Death = $mill

<body>

<div style="position:absolute; top:0px; left:0px; display:none; z-index:0;">

<div id="Promo1">1</div>
<div id="Promo2">2</div>

</div>

<div id="PlaceToUpdate"><div id="Promo1">1</div></div>

<div>
<table width=246 cellpadding="0" cellspacing="0" border="0">
<tr>
<td width=11>
</td>
<td width=235 align="right" bgcolor="#FFFFFF">
<a href="javascript:navigate('Reverse');" name="rev"> < </a> - | - <a href="javascript:navigate('Forward');" name="fwd"> > </a>
</td>
</tr>
</table>
</div>

<a href="javascript:navigate('1');"><img src="http://www.passportimages.com/2057/signin.gif" onClick="doClick('gal1');" name="gal1" border="0" title="" longdesc="" lang="EN" alt=""/></a> | <a href="javascript:navigate('2');"><img src="http://www.passportimages.com/2057/signout.gif" onClick="doClick('gal2');" name="gal2" border="0" title="" longdesc="" lang="EN" alt=""/></a>

<script language="JavaScript">
<!--

var i=0;
var myPromos=new Array();
myPromos[0]=document.getElementById('Promo1').innerHTML;
myPromos[1]=document.getElementById('Promo2').innerHTML;

buttonList = new Object;
buttonList.gal1 = false;
buttonList.gal2 = false;
window.defaultStatus='';

if (document.images) {
gal1on = new Image(); gal1on.src = "signin.gif";
gal1off = new Image(); gal1off.src = "signin.gif";
gal1sel = new Image(); gal1sel.src = "signout.gif";
gal2on = new Image(); gal2on.src = "signin.gif";
gal2off = new Image(); gal2off.src = "signin.gif";
gal2sel = new Image(); gal2sel.src = "signout.gif";

function doClick(whatImage)
{
for (f in buttonList) {
if (buttonList[f] == true) {
buttonList[f] = false;
deactivate(f);
}
}
document[whatImage].src = eval(whatImage + "sel.src");
buttonList[whatImage] = true;
}

function activate(whatImage) {
if (buttonList[whatImage] != true)
document[whatImage].src = eval(whatImage + "on.src");
}

function deactivate(whatImage) {
if (buttonList[whatImage] != true)
document[whatImage].src = eval(whatImage + "off.src");
}
}

// Updater function
function updateID() {
if (document.getElementById) {
document.getElementById('PlaceToUpdate').innerHTML = (myPromos[i]);
}
}

// Dynamic ticker controls
function navigate(direction) {
if (direction == "Reverse") {
i--;
if (i < 0) i = myPromos.length-1;
}
else if (direction == "Forward") {
if (i < myPromos.length-1)
i++;
else i=0;
}
else {
i = parseInt(direction,10) - 1;
}
updateID();
}
//-->
</script>

</body>
deathmill
12-14-2003, 01:01 PM
Hi

This script seems to work fine in IE6, but for some reason its not working on IE5 PC and Mac.

It doesn't seem to load the DIV id=promo1 and so on, im not getting any JS errors so trying to identify what the problem is pretty hard, can any one help?

thanks,

D