-
10-14-2008, 08:32 PM #1
changing sauriks theme to do more than 2 bg images...?
Hey guys, i was taking a look at saruik's theme for winterboard. and i wanted to make some changes... i want to be able to do more than 2 images but im not exactly sure how to change things to make it happen.
I was thinking to just add more toCode:<?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 = ['ran_and_chen_01.jpg', 'ran_and_chen_02.jpg']; 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>and so on but that does not work quite right.Code:var images = ['ran_and_chen_01.jpg', 'ran_and_chen_02.jpg', 'ran_chen_03.jpg', 'ran_chen_04.jpg'];
I read the page at saruik's web space but it refers me to apple developer for css stuff and apple wants 100.00 to join what appears to be forums and refference material.
Any hints welcome.
here's another thing i tried and still no luck...
one image loads, and when it fades i can see another image load but instantly switch to a different one...
so its still only fading two... and flashing one by.
Code:<?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"/> <img id="three"/> <script> var images = ['ran_and_chen_01.jpg', 'ran_and_chen_02.jpg', 'ran_and_chen_03.jpg']; var index = 0; var fade_in = one; var fade_out = two; var fade_out = three; 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>Last edited by 0okami.digital; 10-14-2008 at 08:32 PM. Reason: Automerged Doublepost
~0okami
-
The Following User Says Thank You to 0okami.digital For This Useful Post:
scarthur68 (05-27-2009)
-
10-14-2008, 08:37 PM #2plain jane vanilla (post count restored to FULL AWESOMENESS)
- Join Date
- Jul 2007
- Location
- ATL
- Posts
- 11,692
- Thanks
- 181
- Thanked 1,457 Times in 1,263 Posts
That entire script is wrote based on the use of 2 images.
Give me a minute and I will send you a file that will work.
Edit: Ok, take this script and edit only the list of image files for what you need. Add or subtract as many as you want. They will rotate every minute or so. You can change the timer also if you want.
This part:<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: black;
margin: 0;
padding: 0;
height: 480px;
width: 320px;
}
img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
position: absolute;
width: 320px;
height: auto;
}
img.fade-out {
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head>
<body style="color: black">
<img src="wallpaper/Smoke.jpg"/>
<img src="wallpaper/Waterdrop.jpg"/>
<img src="wallpaper/Greenbulb.jpg"/>
<img src="wallpaper/Ghostgirl.png"/>
<script>
//
// Displays each <img> once in random order before
// randomizing the list again.
// Just add an <img> tag with your filename to add a pic,
// and change interval to control the cycle speed.
var interval = 4 * 20; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 1000);
};
fade();
</script>
</body></html>
Each image has to be listed just like that.....also KEEP IN MIND I store my background images under /wallpaper in the main theme folder....so that why they are listed as wallpaper/image.jpeg.<img src="wallpaper/Smoke.jpg"/>
<img src="wallpaper/Waterdrop.jpg"/>
<img src="wallpaper/Greenbulb.jpg"/>
<img src="wallpaper/Ghostgirl.png"/>Last edited by cpjr; 10-14-2008 at 08:45 PM.
-
The Following 6 Users Say Thank You to cpjr For This Useful Post:
0okami.digital (10-14-2008), chis54 (10-31-2008), dublgrace (11-07-2008), Ice9812 (10-15-2008), rabittman2 (04-11-2009), scarthur68 (05-27-2009)
-
10-14-2008, 08:57 PM #3
Thanks!!!!! that works perfect!
Code:<?xml version="1.0" encoding="UTF-16"?><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> body { background-color: black; margin: 0; padding: 0; height: 480px; width: 320px; } img { -webkit-transition-property: opacity; -webkit-transition-duration: 3s; position: absolute; width: 320px; height: auto; } img.fade-out { opacity: 0; } img.fade-in { opacity: 1; } </style> </head> <body style="color: black"> <img src="Private/ran_and_chen_01.jpg"/> <img src="Private/ran_and_chen_02.jpg"/> <img src="Private/ran_and_chen_03.jpg"/> <script> // // Displays each <img> once in random order before // randomizing the list again. // Just add an <img> tag with your filename to add a pic, // and change interval to control the cycle speed. var interval = 4 * 20; // Seconds between change var images = document.getElementsByTagName("img"); var imageArray = []; var imageCount = images.length; var current = 0; var randomize = function(){ return (Math.round(Math.random() * 3 - 1.5)); } for(var i = 0; i < imageCount; i++){ images[i].className = 'fade-out'; imageArray[i] = images[i]; } imageArray.sort(randomize); var fade = function(){ imageArray[current++].className = 'fade-out'; if(current == imageCount){ current = 0; imageArray.sort(randomize); } imageArray[current].className = 'fade-in'; setTimeout(fade, interval * 1000); }; fade(); </script> </body></html>~0okami
-
10-14-2008, 09:06 PM #4plain jane vanilla (post count restored to FULL AWESOMENESS)
- Join Date
- Jul 2007
- Location
- ATL
- Posts
- 11,692
- Thanks
- 181
- Thanked 1,457 Times in 1,263 Posts
Good!
You can also do your lockscreen background in the same manor. Only difference is you will save the file as "LockBackground.html" instead of background.html.
-
The Following 3 Users Say Thank You to cpjr For This Useful Post:
0okami.digital (10-14-2008), ashpepe (03-16-2009), NogoNogo (10-17-2008)
-
10-14-2008, 10:48 PM #5
Actually for the lock screen i was hoping to throw an animated gif

..but im having issues getting it working. i think i'll save that for another thread though... I Gotta do some searching first.~0okami
-
10-14-2008, 10:51 PM #6plain jane vanilla (post count restored to FULL AWESOMENESS)
- Join Date
- Jul 2007
- Location
- ATL
- Posts
- 11,692
- Thanks
- 181
- Thanked 1,457 Times in 1,263 Posts
Hahaha, ok. Well, you can do that to, same deal takes an html script.
-
10-15-2008, 12:44 AM #7My iPhone is a Part of Me
- Join Date
- May 2008
- Location
- Scranton
- Posts
- 584
- Thanks
- 164
- Thanked 197 Times in 155 Posts
wow thanks so much for this ....i edited it to go with the blackberry theme with 5 wallpapers...and then i figured out how to change my weather+clock widget from wallpaper.html to widget.html.....it wasnt working for me but then i figured out i had the edit the wallpaper.js to look at the widget instead of wallpaper.....im not familiar with html code but i knew it had to be something simple like that so trial and error until i got it but again thanks for the wallpaper changing code....
If I Helped You Hit The Thanks Button
-
10-15-2008, 01:20 AM #8Livin the iPhone Life
- Join Date
- Nov 2007
- Location
- Liberty City
- Posts
- 1,293
- Thanks
- 120
- Thanked 205 Times in 117 Posts
-
10-15-2008, 01:52 AM #9Livin the iPhone Life
- Join Date
- Aug 2007
- Location
- Northern California
- Posts
- 1,503
- Thanks
- 32
- Thanked 181 Times in 164 Posts
heathrox, i dont see anything wrong with the gif...what do you see that i dont?
cpjr??? you see anything wrong?
-
10-15-2008, 06:38 AM #10Livin the iPhone Life
- Join Date
- Nov 2007
- Location
- Liberty City
- Posts
- 1,293
- Thanks
- 120
- Thanked 205 Times in 117 Posts
-
10-15-2008, 07:18 AM #11
-
10-15-2008, 01:32 PM #12My iPhone is a Part of Me
- Join Date
- May 2008
- Location
- Scranton
- Posts
- 584
- Thanks
- 164
- Thanked 197 Times in 155 Posts
Hi cpjr,
i was wondering if its possible to modify this code so that there is an icon folder attached to every wallpaper?.....so basically everytime a wallpaper changes the icons would change with it....so it would be like a rotating "full" theme......
what do you think is it possible?
Thank you
If I Helped You Hit The Thanks Button
-
10-15-2008, 11:39 PM #13Livin the iPhone Life
- Join Date
- Nov 2007
- Location
- Liberty City
- Posts
- 1,293
- Thanks
- 120
- Thanked 205 Times in 117 Posts
-
10-15-2008, 11:41 PM #14plain jane vanilla (post count restored to FULL AWESOMENESS)
- Join Date
- Jul 2007
- Location
- ATL
- Posts
- 11,692
- Thanks
- 181
- Thanked 1,457 Times in 1,263 Posts
-
The Following User Says Thank You to cpjr For This Useful Post:
Ice9812 (10-15-2008)
-
10-16-2008, 12:43 AM #15
pm!? boooo! I'd love to read that response too! ^_^
~0okami
-
10-16-2008, 02:57 PM #16My iPhone is a Part of Me
- Join Date
- May 2008
- Location
- Scranton
- Posts
- 584
- Thanks
- 164
- Thanked 197 Times in 155 Posts
hi i pmed him first thats why he pmed me but basiclly he said it was an interesting idea and that he would look into it but he thinks it would be a very complex code, even if it could work and might be too much for the system to handle....he said he would keep us posted.....
If I Helped You Hit The Thanks Button
-
10-17-2008, 04:19 AM #17What's Jailbreak?
- Join Date
- Oct 2008
- Location
- Sydney, Australia
- Posts
- 28
- Thanks
- 10
- Thanked 1 Time in 1 Post
-
11-02-2008, 07:07 AM #18
-
11-02-2008, 12:24 PM #19plain jane vanilla (post count restored to FULL AWESOMENESS)
- Join Date
- Jul 2007
- Location
- ATL
- Posts
- 11,692
- Thanks
- 181
- Thanked 1,457 Times in 1,263 Posts
Sorry havent gotten back....LockBackground.html will go in the main theme folder just like the Background.html file.
Yeah, unfortunately it will do that for some reason, you can try using a battery theme in Winterboard and placing it ABOVE your main theme....as Winterboard goes in order of "food chain" if you will, using top listed items first and going down the list.
PS- Still working on the changing icons idea...havent gotten very far
...but havent had alot of time to spend on it.
Last edited by cpjr; 11-02-2008 at 12:25 PM. Reason: Automerged Doublepost
-
11-05-2008, 02:59 PM #20iPhoneaholic
- Join Date
- Oct 2007
- Location
- The Republic of Texas
- Posts
- 384
- Thanks
- 24
- Thanked 294 Times in 60 Posts
photo limit
Is there a limit to how many photos you can use? I can only get about 30 working, but I want to use 230.



LinkBack URL
About LinkBacks
Reply With Quote



if thats no what i think it is please forgive me
