Click to See Complete Forum and Search --> : Looking to cycle images in order on a page refresh


glassspider
06-03-2005, 02:14 PM
I need your help web gurus. I'm working on my work's website, and my boss would like it so that six quotes rotate when a visitor refreshes or returns to the homepage. I found a DW extension that allows me to rotate the quotes randomly, but my boss would like them to sequentially, not randomly, rotate. Here's what I have so far:

http://dgsgroup.com/indexRandom.html

I know there's a solution to this, but I haven't found it thus far. I did find an extension that would solve my problem, but it costs $65. I know that my boss will not spend money just for an extension that we'll probably only use on our own site. Please help me if you can.

coothead
06-04-2005, 01:48 PM
Hi there glassspider,

and a warm welcome to these forums. :)
my boss would like them to sequentially, not randomly, rotate.
This could be achieved by using a cookie.
If that appeals to you, remove this script...
<script language="JavaScript">
// Advanced Random Images Start
// Copyright 2001-2002 All rights reserved, by Paul Davis - www.kaosweaver.com
var j,d="",l="",m="",p="",q="",z="",KW_ARI= new Array()
KW_ARI[KW_ARI.length]='/images/quotes/quote1.gif?&width=505&height=107';
KW_ARI[KW_ARI.length]='/images/quotes/quote2.gif?&width=505&height=107';
KW_ARI[KW_ARI.length]='/images/quotes/quote3.gif?&width=505&height=107';
KW_ARI[KW_ARI.length]='/images/quotes/quote4.gif?&width=505&height=107';
KW_ARI[KW_ARI.length]='/images/quotes/quote5.gif?&width=505&height=107';
KW_ARI[KW_ARI.length]='/images/quotes/quote6.gif?&width=505&height=107';
j=parseInt(Math.random()*KW_ARI.length);
j=(isNaN(j))?0:j;
if (KW_ARI[j].indexOf('?')==-1) {
document.write("<img src='"+KW_ARI[j]+"'>");
}
else {
nvp=KW_ARI[j].substring(KW_ARI[j].indexOf('?')+2).split('&');
for(var i=0;i<nvp.length;i++) {
sub=nvp[i].split('=');
switch(sub[0]) {
case 'link':
l="<a href='"+unescape(sub[1])+"'>";
p="</a>";
break;
case 'target':
q=" target='"+unescape(sub[1])+"'";
break;
default:
m+=" "+sub[0]+"='"+unescape(sub[1])+"'";
break;
}
}
z=(l!="")?((q!="")?l.substring(0,l.length-1)+q+">":l):"";
z+="<img src='"+KW_ARI[j].substring(0,KW_ARI[j].indexOf('?'))+"'"+m+">"+p;
document.write(z);
}

// Advanced Random Images End
</script>

...and replace it with this...

<img id="quotes" src="" width="505" height="107" alt="">

...now place this new script within the head section...

<script type="text/javascript">
<!--
var quotes= new Array();
quotes[0]="images/quotes/quote1.gif";
quotes[1]="images/quotes/quote2.gif";
quotes[2]="images/quotes/quote3.gif";
quotes[3]="images/quotes/quote4.gif";
quotes[4]="images/quotes/quote5.gif";
quotes[5]="images/quotes/quote6.gif";

function setCookie() {
num=num+1;
if(num>5) {
num=0;
}
var which = "quotes["+num+"]";
var now = new Date();
now.setTime(now.getTime() + 30*24*60*60*1000);
var expString = "; expires=" + now.toGMTString();
document.cookie = "Quote_="+which+expString;
}

function setQuote() {
if (/Quote_=quotes\[(\d*)\]/.test(document.cookie)) {
document.getElementById("quotes").src =quotes[RegExp.$1*1];
num=RegExp.$1*1;
setCookie();
}
else {
document.getElementById("quotes").src =quotes[0];
num=0;
setCookie();
}
}
//-->
</script>

...finally add this to your body tag...
setQuote();
...like this...
<body bgcolor="#ffffff" onLoad="setQuote();MM_preloadImages('html/images/indexNew_r5_c1_f2.gif'..........

Also note that your page does not validate, the main errors being the lack of a DOCTYPE and the
inclusion of TWO body tags. :eek:
To see these errors take your page to http://validator.w3.org/

coothead

glassspider
06-07-2005, 02:53 PM
Thanks, Coothead!! You rock. As for the extra body tag and non-doctype, it doesn't seem to cause a problem. I know this page could be better on the coding side, but I'm more on the design side of things. I'm just happy that this works. Thanks!

coothead
06-07-2005, 03:09 PM
No problem, you're welcome. :D