I have no idea how to code Javascript, but I fund a nice little script someone had already written so I simply combined it with my favourite custom lockscreen and voila, the lockscreen now cycles through a number of wallpapers "randomly" at set intervals.

The only problem is the transition:
* Absolutely no transition for the background, it just is replaced by the next image in the "randomized" sedquence
* However, everything else blinks out for half a second. The custom clock, date, palpitating heart-logo, year, weather (I'm assuming, I've removed it since I've got an iTouch).

So, does anyone know how to fix this? I'd prefer to have a transition for the wallpapers, preferably a cross-fade, but that's not really that important. What I want to do is get rid of the blinking effect.

Here's all of the code involved:
.js-file:
Code:
/*
**Wallpaper and Lockscreen random cycler
**Author: Jay Zhang (AKA moogoat)
**
**Wallpapers should be put into a Wallpapers folder inside the theme folder (or something else if you changed it).
**Lockscreen pictures should be put into a Lockscreen folder. You can make this the same as your wallpaper folder by changing the setting below (LOCK_WALLPATH)
**Wallpapers should be named starting from 1.jpg all the way up to however many (e.g. 4.jpg). The number of wallpapers MUST be changed afterwards in the setting below.
**
**If you only want one of the cyclers without the other, delete the corresponding .html file. (e.g. delete Wallpaper.html or LockBackground.html)
*/

//WALLPAPER CONFIG
//YOU MUST CHANGE THIS!
var WPNUM = 2; //The number of wallpapers in your Wallpapers folder. CHANGE THIS!

var WALLPATH = "Wallpapers/"; //Wallpaper path, only if you want to change this. Leave it if you don't know what this'll do!

var IMGTYPE = "png"; //The filetype of all your images. Usually png, jpg or gif. All images must be the same filetype!

var CHANGELENGTH = 0.1; //The number of minutes between changes.
html-file:
Code:
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link href="theme/css/theme.css" rel="stylesheet" type="text/css" />
</head>
<script src="configuration.js"></script>
<script type="text/javascript">
	document.write('<style type="text/css">body{background: black url('+WALLPATH+((Math.floor(Math.random()*WPNUM))+1)+'.'+IMGTYPE+');}</style>');
	setTimeout("window.location.reload(false)",CHANGELENGTH*60*1000);
</script>
<body>
  <div class="heart">
    <img class="heartbeat" src="theme/images/heart.png" />
  </div>
  <div class="text clock">
    <span class="ampm"><span class="pump_time_ampm" style="opacity: 0;"></span></span><span class="pump_time"></span><span class="ampm"><span class="pump_time_ampm"></span></span>
  </div>
  <div class="text date">
    <span class="pump_week_day"></span>&nbsp;<span class="pump_date_no_year"></span>
  </div>
  <div class="year">
    <span class="pump_year"></span>
  </div>
</body>
<script src="theme/pump/script/jquery.min.js" type="text/javascript"></script>
<script src="theme/pump/script/themePump.min.js" type="text/javascript"></script>
<script src="theme/script/theme.js" type="text/javascript"></script>
</html>