random image changes on home page or not?

[sean_jackson]

..what i'm wondering is if anybody employs (or knows of) the possibility of generating random image changes within a fragment .It is only desired on the home page when the user lands or nav's back to it that I would like a random image selection to occur - or even one of 3 defined fragments that possibly carried the same text and differing images - I know thats easy to say though and may not be possible - anybody?

I've implemented it in basic html before (well, copied and pasted!) and realise it's possible with php or java - but within actinic the image i'm looking to 'randomise' is embedded in a Fragment so I imagine this would prevent any 'easy' method of involving it in any piece of script/code.

possibilities/non possiblities anyone?

cheers. Sean

[NormanRouxel]

You can embedd HTML (and JavaScript) into a Fragment. Just enclose it with

!!< and >!!

E.g.

This is !!<<b><i>bold italic</i></b>>!!

Also searching for random image will lead you too numerous prior posts.

[pinbrook]

you can lift the code from rannochsmokery dot co dot uk

this is within a fragment. there are 3 images that rotate here, called image1.jpg, image2.jpg and image3.jpg - added to additional files

client can replace these 3 images at will

[OriginalTouch]

Could you let us know the code that you attached to your fragment?

I have tried to do this in the past at the bottom of the homepage at www.spcb.co.uk but it hasn't worked. (Re-uploaded to see - blank space)

The code used here:
fadeimages[0]=["http://www.spcb.co.uk/acatalog/images/fades/aluminium.jpg", "", ""] //plain image syntax
fadeimages[1]=["http://www.spcb.co.uk/acatalog/images/fades/cups.jpg", "", ""] //image with link syntax

For some reason, is being changed on upload to (which suggests an Actinic variable):
fadeimages<Actinic:Variable Name = '0'/>=["http://www.spcb.co.uk/acatalog/images/fades/aluminium.jpg", "", ""] //plain image syntax
10fadeimages<Actinic:Variable Name = '1'/>=["http://www.spcb.co.uk/acatalog/images/fades/cups.jpg", "", ""] //image with link syntax



!!<
<script type="text/javascript">

var slideshow_width='171px' //SET IMAGE WIDTH
var slideshow_height='153px' //SET IMAGE HEIGHT
var pause=2000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["http://www.spcb.co.uk/acatalog/images/fades/aluminium.jpg", "", ""] //plain image syntax
fadeimages[1]=["http://www.spcb.co.uk/acatalog/images/fades/cups.jpg", "", ""] //image with link syntax
fadeimages[2]=["http://www.spcb.co.uk/acatalog/images/fades/rubbermould.jpg", "", ""] //image with link and target syntax
fadeimages[3]=["http://www.spcb.co.uk/acatalog/images/fades/corrosion.jpg", "", ""] //plain image syntax
fadeimages[4]=["http://www.spcb.co.uk/acatalog/images/fades/degrease.jpg", "", ""] //plain image syntax
fadeimages[5]=["http://www.spcb.co.uk/acatalog/images/fades/filter.jpg", "", ""] //plain image syntax
fadeimages[6]=["http://www.spcb.co.uk/acatalog/images/fades/line.jpg", "", ""] //plain image syntax
fadeimages[7]=["http://www.spcb.co.uk/acatalog/images/fades/moss.jpg", "", ""] //plain image syntax
fadeimages[8]=["http://www.spcb.co.uk/acatalog/images/fades/welder.jpg", "", ""] //plain image syntax
fadeimages[9]=["http://www.spcb.co.uk/acatalog/images/fades/watercups.jpg", "", ""] //plain image syntax
fadeimages[10]=["http://www.spcb.co.uk/acatalog/images/fades/spraygun.jpg", "", ""] //plain image syntax
fadeimages[11]=["http://www.spcb.co.uk/acatalog/images/fades/aspifloc.jpg", "", ""] //plain image syntax
fadeimages[12]=["http://www.spcb.co.uk/acatalog/images/fades/grids.jpg", "", ""] //plain image syntax
fadeimages[13]=["http://www.spcb.co.uk/acatalog/images/fades/strippable.jpg", "", ""] //plain image syntax
fadeimages[14]=["http://www.spcb.co.uk/acatalog/images/fades/paint.jpg", "", ""] //plain image syntax
////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p][0]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=insertimage(nextimageindex)
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}

function insertimage(i){
var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",150)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex][0]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML=insertimage(curimageindex)
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>
>!!

[leehack]

There are no sub-folders in acatalog on upload. All images sit in acatalog.

[OriginalTouch]

Tried that, no joy I am afraid. Can't understand how an Actinic variable is being inserted into the fragment text. Something to do with the characters []?

[leehack]

Yes the square brackets are used for the [LINK] facility, so i presume it is getting confused. When i use something like this, i have it in the layout wrapped in a condition which decides which pages to show it. Your Javascript should be a separate file referenced in the <head> area, no need for that to be embedded in the fragment.

[NormanRouxel]

Something to do with the characters []?

Yes. Actinic sees [text] and tries to parse it. Simple solution is to add spaces so

var x = i[j];

becomes
var x = i[ j ];

Or, as Lee says, move the JS to an external file.

[wjcampbe]

Tried that, no joy I am afraid. Can't understand how an Actinic variable is being inserted into the fragment text. Something to do with the characters []?

Yes, the [] are causing the variable problem (perhaps you can solve it by escaping the characters?), but Lee's point is still valid. All the images files will be in the acatalog folder (loaded there by Actinic - even if you duplicate them all in a folder structure uploaded by FTP), so why not reference the acatalog/image and save yourself some work?

[OriginalTouch]

One Step Closer!

Referenced images in /acatalog/ as suggested.

Also input spaces around the [spaceXspace] which removed all the Actinic variables.

One step closer - first image is showing and then it all grinds to a halt - www.spcb.co.uk

Had this code on the old site working in html and so have lifted it.
Saw this thread and it suggests javascript embedded into fragments would work but obviously not the code I'm using!

Could put javascript into <head> - I presume in the master template?
Would I add the whole script?

I presume by condition, you mean a blockif. How would that link to the javascript?

Or what is the code in the first post that does work in a fragment?

Decisions decisions!

[leehack]

Add the images into additional files and upload, they are not online or they are in the wrong place.

[RuralWeb]

Slightly related - Googles latest algo change looks at the use of random image changes on pages when it determines rankings. If they are considered anoying to a visitor you can suffer a ranking penalty.

[OriginalTouch]

Add the images into additional files and upload, they are not online or they are in the wrong place.

Yes, just saw that (via ftp) and the phone rang - hate interruptions!

So, Google doesn't like them!

[RuralWeb]

So, Google doesn't like them!

Not really - just something to consider

[OriginalTouch]

Got it working now. At least it wasn't something major with the code.

Thanks to Norman for the invaluable tip on putting spaces around [] in fragments.

Random images can be distracting - have to ensure they are designed correctly (eg slow transitions) as their advantage is that they can showpiece lots of photos in one location and can bring a bit of life to the page...without using that dreaded "Flash" .... or, even worse, those words that move left to right across the screen aaaaaaaahhhhh!!!