changing sauriks theme to do more than 2 bg images...?

**0okami.digital** · 10-14-2008, 08:32 PM

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.

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"/>

    <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>

I was thinking to just add more to

Code:

        var images = ['ran_and_chen_01.jpg', 'ran_and_chen_02.jpg', 'ran_chen_03.jpg', 'ran_chen_04.jpg'];

and so on but that does not work quite right.

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>

**cpjr** · 10-14-2008, 08:37 PM

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.

<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>

This part:

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.

**0okami.digital** · 10-14-2008, 08:57 PM

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>

**cpjr** · 10-14-2008, 09:06 PM

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.

**0okami.digital** · 10-14-2008, 10:48 PM

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.

**cpjr** · 10-14-2008, 10:51 PM

Hahaha, ok. Well, you can do that to, same deal takes an html script.

**Ice9812** · 10-15-2008, 12:44 AM

Originally Posted by cpjr

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:

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.

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....

**heath_rox** · 10-15-2008, 01:20 AM

Originally Posted by 0okami.digital

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.

why hast the post been changed? that image in highly inappropriate! i thought this was a PG13 forum?

**SundayDuffer** · 10-15-2008, 01:52 AM

heathrox, i dont see anything wrong with the gif...what do you see that i dont?

cpjr??? you see anything wrong?

**heath_rox** · 10-15-2008, 06:38 AM

Originally Posted by SundayDuffer

heathrox, i dont see anything wrong with the gif...what do you see that i dont?

cpjr??? you see anything wrong?

what is that skin colored patch in her skirt pants

if thats no what i think it is please forgive me

**dirtybird1977** · 10-15-2008, 07:18 AM

Originally Posted by heath_rox

what is that skin colored patch in her skirt pants

if thats no what i think it is please forgive me

LOL...the back of her shirt.

**Ice9812** · 10-15-2008, 01:32 PM

Originally Posted by cpjr

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:

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.

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

**heath_rox** · 10-15-2008, 11:39 PM

Originally Posted by dirtybird1977

LOL...the back of her shirt.

o yea sorry

**cpjr** · 10-15-2008, 11:41 PM

Originally Posted by Ice9812

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

Pmed you.

**0okami.digital** · 10-16-2008, 12:43 AM

pm!? boooo! I'd love to read that response too! ^_^

**Ice9812** · 10-16-2008, 02:57 PM

Originally Posted by 0okami.digital

pm!? boooo! I'd love to read that response too! ^_^

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.....

**NogoNogo** · 10-17-2008, 04:19 AM

Originally Posted by cpjr

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.

Sry, where will that file go?
Tks in advance

**ahnamnam** · 11-02-2008, 07:07 AM

Originally Posted by cpjr

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.

cpjr , i tired to use the background.html , and it works perfectly ...
but theres a problem , i couldnt see my battery charging in the lockscreen anymore ... is there something i can do about it ?

thx alot....

**cpjr** · 11-02-2008, 12:24 PM

Originally Posted by NogoNogo

Sry, where will that file go?
Tks in advance

Sorry havent gotten back....LockBackground.html will go in the main theme folder just like the Background.html file.

Originally Posted by ahnamnam

cpjr , i tired to use the background.html , and it works perfectly ...
but theres a problem , i couldnt see my battery charging in the lockscreen anymore ... is there something i can do about it ?

thx alot....

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.

**opusandbill** · 11-05-2008, 02:59 PM

Is there a limit to how many photos you can use? I can only get about 30 working, but I want to use 230.

Thread: changing sauriks theme to do more than 2 bg images...?

LinkBack

Thread Tools

Display

changing sauriks theme to do more than 2 bg images...?

The Following User Says Thank You to 0okami.digital For This Useful Post:

The Following 6 Users Say Thank You to cpjr For This Useful Post:

The Following 3 Users Say Thank You to cpjr For This Useful Post:

The Following User Says Thank You to cpjr For This Useful Post:

photo limit

Posting Permissions