Help with modifying the Saurik Theme...

mflantin

New Member
Bronze
Nov 29, 2007
100
0
0
#1
Anyone out there familiar with HTML codes and played around with the Saurik Theme on Winterboard? The Saurik theme allows you to have a wallpaper that switches images every few seconds. I've figured out how to display the wallpapers I've chosen and have it switching every 8 seconds instead of 15, but for some reason, after all the wallpapers have cycled, it gets stuck cycling only two different wallpapers. Can anyone give me advice on how to change the HTML codes so that it cycles ALL of my wallpapers?
 

dsegel

New Member
Aug 13, 2008
18
0
0
#2
Try posting the section you changed and we can see what you've done.

You may want to look into the iHour theme as it may be easier to modify to get what you're after.
 

mflantin

New Member
Bronze
Nov 29, 2007
100
0
0
#3
Try posting the section you changed and we can see what you've done.

You may want to look into the iHour theme as it may be easier to modify to get what you're after.

<script>
var images = ['Joker.png', 'Snowboard4.png', 'Boondock Saints.png', 'Blue Apple.png', 'Snowboard3.png', 'Bronze.png', 'Wallpaper.png', 'Widmer.png', 'Snowboard2.png'];
var index = 0;
var fade_in = one;
var fade_out = two;
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, 8000);
};
fade();
</script>


Does iHour allow the wallpaper to change every couple of seconds? I know it changes throughout the day, but I wasn't sure if you can set it to alternate every few seconds.
 
Jul 27, 2008
16
0
0
#4
here you go. i editted it to do up to 9 pictures.

<?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: black;
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 style="color: black">
<img id="one"/>
<img id="two"/>

<script>
var images = ['Plant.png', '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png',
'8.png', '9.png'];
var index = 0;

var fade_in = one;
var fade_out = two;

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, 15000);
};

fade();
</script>
</body></html>

Make sure the pictures that u use are are "1.png" if not, change it to 1.png ,2.png , 3.png before you put the files into the device using Disk Aid or SSH
 

mflantin

New Member
Bronze
Nov 29, 2007
100
0
0
#5
here you go. i editted it to do up to 9 pictures.

<?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: black;
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 style="color: black">
<img id="one"/>
<img id="two"/>

<script>
var images = ['Plant.png', '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png',
'8.png', '9.png'];
var index = 0;

var fade_in = one;
var fade_out = two;

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, 15000);
};

fade();
</script>
</body></html>

Make sure the pictures that u use are are "1.png" if not, change it to 1.png ,2.png , 3.png before you put the files into the device using Disk Aid or SSH

I've done this already and it does cycle all nine pictures, but for some reason after it comletely cycles all the pictures, it get stuck cycling only two of the pictures. I'm trying to figure out how to configure it so it always cycles all nine pictures instead of getting stuck with two.
 
Jul 27, 2008
16
0
0
#6
I've done this already and it does cycle all nine pictures, but for some reason after it comletely cycles all the pictures, it get stuck cycling only two of the pictures. I'm trying to figure out how to configure it so it always cycles all nine pictures instead of getting stuck with two.
I think you messed up something up in your saurik file because with that code it should keep on cycling the 9 cycles because that is telling what the theme should do.
 

cooljo555

New Member
May 11, 2008
1
0
0
#7
THANKYOU very much for this, a have over 150 images now cycling and this was all i needed, the iHome theme doesn't cut it with picture for each preset time. Granted its not the wallpaper changing like rwallpaper does, but it just as good if not better because it actually changes with the time interval. If anyone figures out how to get rwallpaper on a jailbroke 2.2 it would be much appreciated.
 
Apr 21, 2009
2
0
0
#8
I'm having some issues with this code. I added more pictures and added the correct filenames between the brackets in "var images = [...]"

The pictures do cycle, but during the transitions, there is a weird effect.

As the first picture fades out, the picture AFTER the NEXT (3rd) flashes for a brief second, before the 2nd picture fades in. It's like that for the whole sequence and looks horrible.

How can I fix this code so that the transitions are smooth from one picture to the next and have it cycle back to the first after the series is over? Thanks!

<?xml version="1.0" encoding="UTF-16"?>
<html><head>
<base href="Private/"/>
<!--meta name="viewport" content="width=320, minimum-sale=1.0, maximum-scale=1.0"/-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style>
body {
background-color: black;
margin: 0;
padding: 20px 0 0 0;
height: 1024px;
width: 768px;
}

img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
position: absolute;
width: 768px;
height: auto;
}

img.fade-out {
opacity: 0;
}

img.fade-in {
opacity: 1;
}
</style>
</head><body style="color: black">
<img id="one"/>
<img id="two"/>

<script>
var images = ['001.png', '002.png', '003.png', '004.png', '005.png', '006.png', '007.png', '008.png', '009.png', '011.png', '012.png', '013.png', '014.png', '015.png', '016.png', '017.png', '018.png', '019.png', '020.png', '021.png', '022.png', '023.png', '024.png', '025.png', '026.png'];
var index = 0;

var fade_in = one;
var fade_out = two;


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, 4500);
};

fade();
</script>
</body></html>
 

ronaldcs

New Member
Feb 11, 2011
1
0
0
#10
I'm having some issues with this code. I added more pictures and added the correct filenames between the brackets in "var images = [...]"

The pictures do cycle, but during the transitions, there is a weird effect.

As the first picture fades out, the picture AFTER the NEXT (3rd) flashes for a brief second, before the 2nd picture fades in. It's like that for the whole sequence and looks horrible.

How can I fix this code so that the transitions are smooth from one picture to the next and have it cycle back to the first after the series is over? Thanks!

...
The problem lies in setting the .src property too soon before the animation ends. Try this:

<?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: black;
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 style="color: black">
<img id="one"/>
<img id="two"/>

<script>
var images = ['img01.png', 'img02.png', 'img03.png', 'img04.png', 'img05.png'];
var index = 0;
var toggle = 0;

var fade_one = one;
var fade_two = two;
var fade_toggle = ['out', 'in'];

fade_one.src = images[index];
index = (index + 1) % images.length;
fade_two.src = images[index];

var fade = function () {
fade_one.className = 'fade-' + fade_toggle[toggle];
toggle = (toggle + 1) % fade_toggle.length;
fade_two.className = 'fade-' + fade_toggle[toggle];

index = (index + 1) % images.length;
setTimeout(function () { if(fade_one.className == 'fade-out') { fade_one.src = images[index]; } else { fade_two.src = images[index]; } }, 2000);
setTimeout(fade, 15000);
};

fade();
</script>
</body></html>
 
Apr 7, 2011
4
0
0
#11
Need help with saurik theme!

Okay so i found out how to change the saurik wallpapers to the ones i want but when ever it goes in for the transition the photo coming up goes horizontally and then goes vertical(the way it should be) im not sure how to fix that? Any help?
 

Europa

Moderator
Senior Moderator
Dec 12, 2008
28,365
5,506
113
Utah
#12
You can add the dock to your theme or to the system folder.

Your theme:
Themes > Your theme > Bundles > com.apple.springboard > SBDockBG@2x.png

System Folder:
First backup the original dock. Then place the dock in System > Library > CoreServices > SpringBoard.app
 

Europa

Moderator
Senior Moderator
Dec 12, 2008
28,365
5,506
113
Utah
#14
This happens because iOS 4 has a different size dock because of the multitasking popup. Try resizing the dock image heights from 90 to 45.
 

XNivekkX

New Member
Jan 5, 2012
1
0
1
#15
Hello i have 13 pictures and followed your html and ... the only pictures i get is a Blue square with a question mark ... i see it fade but it still gives me an other question mark


Never mind found out the problem the file was in PNG (capital letters) when it was supposed to be in non capital letters