Results 1 to 3 of 3

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.


Thread: Rotating Backgrounds

  1. #1
    Default Rotating Backgrounds
    Hello All,

    So I am using Saurik theme with winterboard to do a rotating background. I am having trouble. With two images it works perfect, but with more the images run through the rotation once and then they start to not fade properly. They kinda fade and while fading to the next images a different will pop for a split second. After a few rotations its back in sync and then it goes out again.

    Here is my code for the Wallpaper.html file for the theme. Can anyone see what Im doing wrong.

    <?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: none;
    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 onload="onLoad()">
    <img id="one"/>
    <img id="two"/>
    <img id="three"/>
    <img id="four"/>
    <img id="five"/>
    <img id="six"/>
    <img id="seven"/>
    <img id="eight"/>


    <script>
    var images = ['Sam.png', 'Sam2.png', 'Sam3.png', 'Sam4.png', 'Sam5.png', 'Sam6.png', 'Sam7.png', 'Sam8.png'];
    var index = 0;

    var fade_in = one;
    var fade_out = two;
    var fade_in = three;
    var fade_out = four;
    var fade_in = five;
    var fade_out = six;
    var fade_in = seven;
    var fade_out = eight;


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

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

  2. #2
    i want to do this also.. i have a total of 9 walls that i want to rotate on a certain time interval and transition...

  3. #3
    Green Apple mwcoexec's Avatar
    Join Date
    Feb 2009
    Location
    Charlotte, NC
    Posts
    90
    Thanks
    30
    Thanked 17 Times in 13 Posts

    I used a theme called Time of Day and modified the code to get 6 different backgrounds that rotate depending on the time of day. They don't fade in and out, but they are set to rotate every few hours.

    Credit for the Time of Day theme goes to the creator, all I did was alter it to use the wallpapers of my choosing on the intervals I wanted.

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •