Apple & iPhone Forums, News, Mods, Hacks, Themes, Skins, and Downloads is what we do!

0okami.digital · #1 10-14-2008, 09: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** · #2 10-14-2008, 09: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.

Quote:

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

Quote:

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 · #3 10-14-2008, 09: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** · #4 10-14-2008, 10: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 · #5 10-14-2008, 11: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** · #6 10-14-2008, 11:51 PM

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

Ice9812 · #7 10-15-2008, 01:44 AM

Quote:

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 · #8 10-15-2008, 02:20 AM

Quote:

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** · #9 10-15-2008, 02: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 10-15-2008, 07:38 AM

Quote:

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 · #11 10-15-2008, 08:18 AM

Quote:

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 · #12 10-15-2008, 02:32 PM

Quote:

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 · #13 10-16-2008, 12:39 AM

Quote:

Originally Posted by dirtybird1977

LOL...the back of her shirt.

o yea sorry

**cpjr** · #14 10-16-2008, 12:41 AM

Quote:

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 · #15 10-16-2008, 01:43 AM

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

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Apple & iPhone Forums, News, Mods, Hacks, Themes, Skins, and Downloads is what we do!

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

WinterBoard

Skinning / Themes Discussion

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

The Following User Says Thank You to 0okami.digital For This Useful Post:
scarthur68 (05-28-2009)

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-28-2009)

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)

The Following User Says Thank You to cpjr For This Useful Post:
Ice9812 (10-16-2008)

User Name
Password			Cookie?