Pin It

How to Create Rotating Wallpaper for iPhone using Winterboard

For any jailbreak iPhone users, I believe you have installed Winterboard, which is a great theme manager to skin your iPhone, as an essential application. There are a tons of free Winterboard themes on the Internet. But do you ever think of create your own theme? I’m a Mac user and always love to have rotating wallpaper that changed over time on my iMac. Wouldn’t be a great idea to have the same on iPhone? You can pick a series of your best photos and got them rotated in iPhone background.

Thanks for the great design of Winterboard. If you have basic Javascript / HTML knowledge, you can easily create your own Winterboard theme. I’ve built my first Winterboard called “Rotating Wallpaper”, that allows you to select a total of six photos that will be rotated in every 15 seconds. The theme is quite primitive and more features (like fading effect) will be added later.

Installing Rotating Wallpaper

The theme is freely for download and you can install it via DiskAid or SSH. For details of install procedures, download the theme here and follow the procedures mentioned in “How to Install Winterboard theme on iPhone without using Cydia”.

Using Your Own Photos

You’re free to replace the default photos with your own for the rotating wallpapers. After you decompress the theme package, go to the “Private” folder. All wallpaper images can be found there. Just copy your own photos and replace them. But make sure you should have the correct filename and the image should be best with width of 320 pixels and length not shorter than 460 pixels.

After replacement, you can just copy the “Rotating Wallpaper” folder to “/Library/Themes” folder on iPhone. Then launch Winterboard and select the “Rotating Wallpaper”, followed by clicking Home button.

Wait for a while and you can enjoy Rotating Wallpaper with your own photos on iPhone. Let us know if you find any problem or have any suggestion for the theme.

About Simon Ng

Founder, developer and chief blogger of simonblog.com

, ,

23 Responses to How to Create Rotating Wallpaper for iPhone using Winterboard

  1. Alexander Dombroff January 30, 2009 at 2:07 pm #

    I`ve been wanting forever to get an iPhone, and i might just do that in the next week. Te information i fond on your blog are very useful. Thank you for sharing it with us.

  2. Boy February 3, 2009 at 10:48 am #

    hello this rotating wallpaper is not working I try do it same like in instructions…

  3. Ian March 9, 2009 at 11:52 am #

    Hi, this is exactly what i have been looking for. cant wait for the transition effects to be implemented. was also wondering why this app is not on cydia? loads of ppl are looking for this kind of thing :)

  4. Kai July 29, 2009 at 1:51 am #

    Is there a way to edit the code so that I can rotate all the images I put in the directory to be displayed

  5. Paul Dubya September 25, 2009 at 2:54 am #

    This will work if you edit the code. Change the image extensions from “.jpg” to “.png” and use only .png format images.

    Windows
    1.Open the Wallpaper html file with notepad.
    2.Look for the image names. ie; img1.jpg
    3.Change all six image file extensions to “.png”
    4.Save .png images into the “private” folder.

    Thanks for the code Simon!

  6. sykO September 29, 2009 at 5:44 pm #

    Hello, the idea is great, seen it done before, main question though, I have set it so my pictures do cycle through, I have also heard that the ”Wallpaper.html” Can be used to make the cycle faster, if so, any ideas on how to do that?

    • Aurora October 22, 2009 at 2:28 am #

      sykO, you can modify Wallpaper.html and change this line:
      setTimeout(fade, 15000);

      The current setting is 15000 = 15 seconds. Just change it to the number of seconds you want. I changed mine to 3600000 = 1 hour.

  7. stephen December 21, 2009 at 3:29 am #

    Any way to do this with video (mp4) files

  8. Mrfobber December 23, 2009 at 12:27 pm #

    Hello,

    Does this only work with iphone? I have an ipod touch 2g and DiskAid installed, but under the root menu in DiskAid, there is no “library” tab”. Please teach me how to install the “Rotating Wallpaper” folder to my Ipod touch v2 using DiskAid. Thanks!

    (My ipod touch is jail broken with Black Rain and I have Cydia installed)

  9. Shea May 14, 2010 at 7:21 pm #

    Is it possible to combine this theme with my own theme to make a rotating background in my own theme?

  10. nick September 29, 2010 at 8:55 pm #

    Shea, Yes. Just put this theme file above your other theme and have them both active.

  11. sergiok October 19, 2010 at 1:37 am #

    Hi,

    Thanks for sharing your widget :)
    The fade in/out did not work for me with your code “as is”, so I’ve slightly modified it:
    var images = ['img1.jpg','img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg', 'img6.jpg'];
    var index = 0;
    var fade_in = one;
    var fade_out = two;

    var fade = function () {
    fade_out.src = images[index];
    index = (index + 1) % images.length;
    fade_in.src = images[index];
    fade_in.className = ‘fade-in';
    fade_out.className = ‘fade-out';
    var swapImg = fade_in;
    fade_in = fade_out;
    fade_out = swapImg;
    setTimeout(fade, 15000);
    };
    fade();

    if you don’t swap image elemets they’ll always have the same className (#one.fade-in/#two.fade-out), therefore the opacity will never change => no transition

    Cheers

    • Simon Ng October 21, 2010 at 12:56 am #

      @sergiok,

      Thanks for sharing!

      • sergiok October 28, 2010 at 11:10 am #

        No problem,
        Btw here’s another small update that I’m using:
        – random wallpaper
        – random time interval

        function getImagePath(num) {
        return ‘img’+num+’.jpg';
        }
        function getNextIndex() {
        return Math.floor(Math.random() * (maxIndex – minIndex + 1)) + minIndex;
        }
        var minInterval = 60 * 20; // 20 min
        var maxInterval = 60 * 60; // 1 h
        var minIndex = 1;
        var maxIndex = 31;
        var prevIndex = 1;
        var index = getNextIndex();
        var fade_in = one;
        var fade_out = two;

        var fade = function () {
        prevIndex = index;
        index = getNextIndex();
        fade_out.src = getImagePath(prevIndex);
        fade_in.src = getImagePath(index);
        fade_in.className = ‘fade-in';
        fade_out.className = ‘fade-out';
        var swapImg = fade_in;
        fade_in = fade_out;
        fade_out = swapImg;
        setTimeout(fade, (Math.floor(Math.random() * (maxInterval – minInterval + 1)) + minInterval) * 1000);
        };
        fade();
        This requires to name all the images using the same pattern (like “imgX.jpg” here) and you have to change “maxIndex” to the max “X” you have (here I have 31 images) when you add new images (I thought it would be easier than to type the name of each file, which could be veeery long, into the “images” array).
        You can change the intervals to whatever you want, but I found that running this something like every 15min is a bit hard on the battery so I’ve stretched the interval to 20-60min for me, which seems to be a lot easier on the battery life of my 3GS (I’d even say I don’t see the difference between widget/no-widget).
        There, now I’m perfectly happy with it (I also thought about randomizing transition types, but it’s not something you’ll see with battery-friendly AND random intervals unless you keep staring at your iDevice’s desktop…)

  12. Edwin Bush November 12, 2010 at 12:35 pm #

    You can use BossPaper to do this as well, and its a well designed app.

  13. Chas February 22, 2012 at 12:34 am #

    i cant get it to work… my screen shows up clack with a little blue question mark on the top on the screen. what am i doing wrong? iphone 4..

  14. Chas February 22, 2012 at 12:34 am #

    black*

  15. Max March 3, 2012 at 2:53 pm #

    When I open a connection on Cyberduck (SSH) I go into Library but there is no Themes folder, so when I tried dropping it in it did not show up in Winterboard. Anyone have a solution? I love the idea though and can’t wait to put it into use!

  16. Amethyst May 10, 2012 at 7:46 pm #

    How do you keep an image you want as a desktop wallpaper to stay on your desktop?

  17. Zach September 7, 2012 at 12:41 pm #

    Very cool blog…I will have to come back and take a look around, especially for the iPhone 5 posts.

    Quick question: Is it possible to get automatically rotating background photos on an iPod Touch running iOs 6, WITHOUT jailbreaking?

    I am not too tech-savvy and my eyes glaze over when I hear about getting Cydia, but thus far I haven’t found anyone with a hack to get rotating backgrounds short of Cydia.

    Thanks in advance. – Zach

  18. desktop background November 12, 2012 at 2:38 pm #

    Excellent site you have got here.. It’s difficult to find high-quality writing like yours these days. I really appreciate people like you! Take care!!

  19. Raul Delarosa Sr February 8, 2013 at 8:22 am #

    Can anyone help me out? How can I modify this to auto-rotate and auto re-size the wallpapers on my New iPad?
    Thanks in advance.

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

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

    img.fade-out {
    opacity: 0;
    }

    img.fade-in {
    opacity: 1;
    }

    var images = ['img1.jpg','img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg', 'img6.jpg', 'img8.jpg', 'img9.jpg', 'img10.jpg', 'img11.jpg', 'img12.jpg', 'img13.jpg', 'img14.jpg', 'img15.jpg', 'img16.jpg', 'img17.jpg', 'img18.jpg', 'img19.jpg', 'img20.jpg'];
    var index = 1;

    var fade_in = one;
    var fade_out = two;

    fade_in.src = images[index];
    fade_out.src = images[index - 1];

    var fade = function () {
    fade_in.src = images[index];
    index = (index + 1) % images.length;

    fade_out.src = images[index - 2];
    fade_in.className = ‘fade-in';
    fade_out.className = ‘fade-out';

    setTimeout(fade, 15000);
    };

    fade();

Trackbacks/Pingbacks

  1. iPhone 4 / 3GS HTC Clock & Weather Widget - November 26, 2010

    [...] just thought there might be a way to incorporate this code found here How to Create Rotating Wallpaper for iPhone using Winterboard | The iPhone and iPad Blog by Simon Seems to work on iphone 4 as a standalone for sure and does rotate wallpaper but I loose your [...]

Leave a Reply