Hello All,
So I am using Saurik theme with winterboard to do a rotating background. I am having trouble. With two images it works perfect, but with more the images run through the rotation once and then they start to not fade properly. They kinda fade and while fading to the next images a different will pop for a split second. After a few rotations its back in sync and then it goes out again.
Here is my code for the Wallpaper.html file for the theme. Can anyone see what Im doing wrong.
<?xml version="1.0" encoding="UTF-16"?>
<html><head>
<base href="Private/"/>
<!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: none;
margin: 0;
padding: 20px 0 0 0;
height: 442px;
width: 320px;
}
img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
position: absolute;
width: 320px;
height: auto;
}
img.fade-out {
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head><body onload="onLoad()">
<img id="one"/>
<img id="two"/>
<img id="three"/>
<img id="four"/>
<img id="five"/>
<img id="six"/>
<img id="seven"/>
<img id="eight"/>
<script>
var images = ['Sam.png', 'Sam2.png', 'Sam3.png', 'Sam4.png', 'Sam5.png', 'Sam6.png', 'Sam7.png', 'Sam8.png'];
var index = 0;
var fade_in = one;
var fade_out = two;
var fade_in = three;
var fade_out = four;
var fade_in = five;
var fade_out = six;
var fade_in = seven;
var fade_out = eight;
fade_in.src = images[0];
fade_out.src = images[images.length - 1];
var fade = function () {
fade_in.src = images[index];
index = (index + 1) % images.length;
fade_in.className = 'fade-out';
fade_out.className = 'fade-in';
var fade_tmp = fade_in;
fade_in = fade_out;
fade_out = fade_tmp;
setTimeout(fade, 10000);
};
fade();
</script>
</body></html>
06-30-2009, 10:25 PM
Linear Mode
