Random Image transitions with BG changer?

[Inny]

Hello, Im using the background image change script below and I want to change each image with a transition, swipe, circle in, circleout etc randomly.
Not sure how to make random transitions with each changing image. please assist. (if possible cross browser compatible), if not should degrade in other browsers.

 
<script LANGUAGE="JavaScript">
<!--
var BackgroundChangeIndex = 0;
 
var wistol = new Array
("http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg", "http://i14.photobucket.com/albums/a345/Instar/rsntort1024-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/WesternDiamondBackRattlesnake-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/reptile_003-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/reptileCopperheadSnake-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/turtlesbg-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/reptile_001-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/Picture163-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/NzCommonGreenGeckoCloseup-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/crocodile_3-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/FijianSkinkEatingEarwig-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/HornedLizard-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/1113330679_1280-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/Croc-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/Chameleon_Wallpaper_by_phreeza-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/1113330784_1280-1.jpg"); 
 
function SetBackgroundImage()
{
var BackgroundImage;
BackgroundChangeIndex++;
if (BackgroundChangeIndex >= wistol.length)
{
BackgroundChangeIndex = 0;
}
BackgroundImage = wistol[BackgroundChangeIndex]
document.body.style.cssText="background: url(" + BackgroundImage + ");" + "background-attachment: fixed; center; center;"
 
setTimeout("SetBackgroundImage()", 10000) 
 
}
window.onload = SetBackgroundImage;
//-->
</script>
 
 

[Inny]

This is the effect I want Except The images should rotate automatically like the above script,(no onclick)
I cannot work out how to combine the two.

<script type="text/javascript">
 
var photos=new Array()
var photoslink=new Array()
var which=0
 
//define images. You can have as many as you want:
photos[0]="http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg"
photos[1]="http://i14.photobucket.com/albums/a345/Instar/rsntort1024-1.jpg"
photos[2]="http://i14.photobucket.com/albums/a345/Instar/WesternDiamondBackRattlesnake-1.jpg"
photos[3]="http://i14.photobucket.com/albums/a345/Instar/reptile_003-1.jpg"
photos[4]="http://i14.photobucket.com/albums/a345/Instar/reptileCopperheadSnake-1.jpg"
photos[5]="http://i14.photobucket.com/albums/a345/Instar/turtlesbg-1.jpg"
photos[6]="http://i14.photobucket.com/albums/a345/Instar/reptile_001-1.jpg"
photos[7]="http://i14.photobucket.com/albums/a345/Instar/Picture163-1.jpg"
photos[8]="http://i14.photobucket.com/albums/a345/Instar/NzCommonGreenGeckoCloseup-1.jpg"
photos[9]="http://i14.photobucket.com/albums/a345/Instar/crocodile_3-1.jpg"
photos[10]="http://i14.photobucket.com/albums/a345/Instar/FijianSkinkEatingEarwig-1.jpg"
photos[11]="http://i14.photobucket.com/albums/a345/Instar/HornedLizard-1.jpg"
photos[12]="http://i14.photobucket.com/albums/a345/Instar/1113330679_1280-1.jpg"
photos[13]="http://i14.photobucket.com/albums/a345/Instar/Croc-1.jpg"
photos[14]="http://i14.photobucket.com/albums/a345/Instar/Chameleon_Wallpaper_by_phreeza-1.jpg"
photos[15]="http://i14.photobucket.com/albums/a345/Instar/1113330784_1280-1.jpg"
 
 
 
//Specify whether images should be linked or not (1=linked)
var linkornot=0
 
//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""
 
//do NOT edit pass this line
 
var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}
 
 
function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}
 
 
 
function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}
 
function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}
 
 
function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}
 
function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}
 
function transport(){
window.location=photoslink[which]
}
 
 
</script>
 
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
 
 
   <a href="#" onClick="backward();return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="forward();return false">Next Slide</a>
 

[acoder]

Copy applyEffect and playEffect and call them above and below line 17 (respectively) in your first script.

This will only work in IE.

Hope that helps.

[Inny]

Copy applyEffect and playEffect and call them above and below line 17 (respectively) in your first script.

This will only work in IE.

Hope that helps.

Not sure what arguments im using to call the functions? Im not that well versed in JS

I did this but still no transistions affects???? Help Im Clueless!

<script LANGUAGE="JavaScript">
<!--
var BackgroundChangeIndex = 0;
 
var wistol = new Array
("http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg", "http://i14.photobucket.com/albums/a345/Instar/rsntort1024-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/WesternDiamondBackRattlesnake-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/reptile_003-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/reptileCopperheadSnake-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/turtlesbg-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/reptile_001-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/Picture163-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/NzCommonGreenGeckoCloseup-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/crocodile_3-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/FijianSkinkEatingEarwig-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/HornedLizard-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/1113330679_1280-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/Croc-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/Chameleon_Wallpaper_by_phreeza-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/1113330784_1280-1.jpg"); 
 
function SetBackgroundImage()
{
var BackgroundImage;
BackgroundChangeIndex++;
if (BackgroundChangeIndex >= wistol.length)
{
BackgroundChangeIndex = 0;
}
BackgroundImage = wistol[BackgroundChangeIndex]
function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}
document.body.style.cssText="background: url(" + BackgroundImage + ");" + "background-attachment: fixed; center; center;"
function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}
 
setTimeout("SetBackgroundImage()", 10000) 
 
}
window.onload = SetBackgroundImage;
//-->
</script>
 

[acoder]

Not sure what arguments im using to call the functions? Im not that well versed in JS

I did this but still no transistions affects?

I meant copying the functions above the code, but calling the functions at those positions:

applyeffect();
document.body.style.cssText="background: url(" + BackgroundImage + ");" + "background-attachment: fixed; center; center;";
playeffect();

No arguments are needed.

You will also need to change the functions themselves to apply to document.body rather than 'photoslider'.

[Inny]

like this? not working,still no transistions, am i wasting my time here?

 
 
 
 
<script LANGUAGE="JavaScript">
<!--
 
function applyEffect(){
if (document.all && document.body.style.cssText.filters){
document.body.filters.revealTrans.Transition=Math.floor(Math.random()*23)
document.body.filters.revealTrans.stop()
document.body.filters.revealTrans.apply()
}
}
 
function playEffect(){
if (document.all && document.body.filters)
document.body.filters.revealTrans.play()
}
 
 
 
var BackgroundChangeIndex = 0;
var wistol = new Array
("http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg", "http://i14.photobucket.com/albums/a345/Instar/rsntort1024-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/WesternDiamondBackRattlesnake-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/reptile_003-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/reptileCopperheadSnake-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/turtlesbg-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/reptile_001-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/Picture163-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/NzCommonGreenGeckoCloseup-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/crocodile_3-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/FijianSkinkEatingEarwig-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/HornedLizard-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/1113330679_1280-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/Croc-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/Chameleon_Wallpaper_by_phreeza-1.jpg", "http://i14.photobucket.com/albums/a345/Instar/1113330784_1280-1.jpg"); 
 
 
function SetBackgroundImage()
{
var BackgroundImage;
BackgroundChangeIndex++;
if (BackgroundChangeIndex >= wistol.length)
{
BackgroundChangeIndex = 0;
}
 
 
BackgroundImage = wistol[BackgroundChangeIndex]
 
 
applyEffect();
document.body.style.cssText="background: url(" + BackgroundImage + ");" + "background-attachment: fixed; center; center;";
 
 
playEffect();
 
setTimeout("SetBackgroundImage()", 10000) 
 
}
window.onload = SetBackgroundImage;
//-->
</script>
 
 
 

[acoder]

To tell you the truth, I don't use filters much because they only work in IE.

It almost seems correct except on line 5, instead of checking for filters on cssText, check document.body.f ilters as you have done on line 13.

Whenever you test for something before using it (to avoid errors), only test the thing you're going to use, so in this case, there's no need to check for document.all.