Random Image when new page opens .. that old chest nut

[Classix]

Hi, just a a question about the random image function in Actinic, we've got it working well within our site but i'm wanting to add 'Alt' array to it. Is this possible and how would we go about doing it?

our header code is:

<script type="text/javascript">

var cvimages=new Array('<actinic:variable name="IMAGE13" />','<actinic:variable name="IMAGE14" />','<actinic:variable name="IMAGE15" />','<actinic:variable name="IMAGE16" />','<actinic:variable name="IMAGE17" />','<actinic:variable name="IMAGE18" />','<actinic:variable name="IMAGE19" />','<actinic:variable name="IMAGE20" />','<actinic:variable name="IMAGE21" />','<actinic:variable name="IMAGE22" />');

var cvlinks=new Array('<actinic:variable name="LINK13" />','<actinic:variable name="LINK14" />','<actinic:variable name="LINK15" />','<actinic:variable name="LINK16" />','<actinic:variable name="LINK17" />','<actinic:variable name="LINK18" />','<actinic:variable name="LINK19" />','<actinic:variable name="LINK20" />','<actinic:variable name="LINK21" />','<actinic:variable name="LINK22" />');

var images=new Array();
var links=new Array();
for (var i=0; i < cvimages.length; i++) { if (cvimages[i] != '') { images.push(cvimages[i]); links.push(cvlinks[i]); } }
idx = Math.floor(Math.random()*images.length - 0.01);
showlink = (links[ idx ] != '');

</script>

and

<script language=JavaScript>
<!--
if (showlink) document.write('<a href="' + links[ idx ] + '">');
document.write('<img border=0 class=moiicon src="' + images[ idx ] + '">');
if (showlink) document.write('<\a>');
//-->
</script>

Any help would be greatfully appreicated.

[NormanRouxel]

Create text variables ALT13 .. ALT22 (like the LINK ones).

Use:

<script type="text/javascript">

var cvimages=new Array('<actinic:variable name="IMAGE13" />','<actinic:variable name="IMAGE14" />','<actinic:variable name="IMAGE15" />','<actinic:variable name="IMAGE16" />','<actinic:variable name="IMAGE17" />','<actinic:variable name="IMAGE18" />','<actinic:variable name="IMAGE19" />','<actinic:variable name="IMAGE20" />','<actinic:variable name="IMAGE21" />','<actinic:variable name="IMAGE22" />');

var cvlinks=new Array('<actinic:variable name="LINK13" />','<actinic:variable name="LINK14" />','<actinic:variable name="LINK15" />','<actinic:variable name="LINK16" />','<actinic:variable name="LINK17" />','<actinic:variable name="LINK18" />','<actinic:variable name="LINK19" />','<actinic:variable name="LINK20" />','<actinic:variable name="LINK21" />','<actinic:variable name="LINK22" />');

var cvalts=new Array('<actinic:variable name="ALT13" />','<actinic:variable name="ALT14" />','<actinic:variable name="ALT15" />','<actinic:variable name="ALT16" />','<actinic:variable name="ALT17" />','<actinic:variable name="ALT18" />','<actinic:variable name="ALT19" />','<actinic:variable name="ALT20" />','<actinic:variable name="ALT21" />','<actinic:variable name="ALT22" />');

var images=new Array();
var links=new Array();
var alts=new Array();
for (var i=0; i < cvimages.length; i++) { if (cvimages[i] != '') { images.push(cvimages[i]); links.push(cvlinks[i]); alts.push(cvalts[i]);} }
idx = Math.floor(Math.random()*images.length - 0.01);
showlink = (links[ idx ] != '');
altcode = (alts[ idx ] != '') ? ' alt="' + alts[ idx ] + '"' : '';

</script>

And

<script language=JavaScript>
<!--
if (showlink) document.write('<a href="' + links[ idx ] + '">');
document.write('<img border=0 class=moiicon src="' + images[ idx ] + '"' + altcode + '>');
if (showlink) document.write('<\a>');
//-->
</script>

[Classix]

Works a treat, thanks again Norman

[mash]

Hi,

I have used this on our v9 test site to give it quite a fresh and changing feel to it (Organic Plants Test Site).

Works really well, I was planning to take out the code in the header and place that is a separate js file, have tried this in the past with limited success, the aim was to reduce the amount of code in the header which my limited understanding is a good thing. Fingers crossed I will get it right and if not use FF to point me in the right direction.

I appreciate the nature of the code is to generate a random image so my next question is a little odd, is it possible to control the first image which appears on any of the pages which are view (so independent of the entry page) and then all the rest of the images to be random which could include the first one.

The reason behind this question, would like to have a banded banner when the person enters the website and then after that, it would be nice to have the random images to start.

Am I mad, well that is a whole different thread!

It is an excellent way of doing the banners so thank you.

[NormanRouxel]

Mash

You could investigate using a cookie (with a lifetime of the site visit only). If it's not set, display the first image (then set said cookie). If it's set, display a random image.

[mash]

Norman, thanks for that, would it be possible to use the similar script outlined in the KB which covers How do I empty the cart when people leave the checkout?.

Instead of using it to empty the cart but to trigger the random script. Sadly beyond me but I will continue to research it.

Thanks for the pointer, will add the alt text too, very nice.

[NormanRouxel]

All you need is something like (to set the cookie);

document.cookie = 'ImageShown=Yes';

And to test the cookie has been set

if ( document.cookie.indexOf('ImageShown') > -1 ) alert('We have a cookie');

Try googling for "javascript cookies tutorial" for assistance.

[mash]

Thanks will let you know how I get on.