Help with modifying the Saurik Theme...

Discussion in 'iPhone Jailbreak' started by mflantin, Sep 16, 2008.

  1. mflantin

    mflantin New Member
    Bronze

    Joined:
    Nov 29, 2007
    Likes Received:
    0
    Anyone out there familiar with HTML codes and played around with the Saurik Theme on Winterboard? The Saurik theme allows you to have a wallpaper that switches images every few seconds. I've figured out how to display the wallpapers I've chosen and have it switching every 8 seconds instead of 15, but for some reason, after all the wallpapers have cycled, it gets stuck cycling only two different wallpapers. Can anyone give me advice on how to change the HTML codes so that it cycles ALL of my wallpapers?
     
  2. dsegel

    dsegel New Member

    Joined:
    Aug 13, 2008
    Likes Received:
    0
    Try posting the section you changed and we can see what you've done.

    You may want to look into the iHour theme as it may be easier to modify to get what you're after.
     
  3. mflantin

    mflantin New Member
    Bronze

    Joined:
    Nov 29, 2007
    Likes Received:
    0

    <script>
    var images = ['Joker.png', 'Snowboard4.png', 'Boondock Saints.png', 'Blue Apple.png', 'Snowboard3.png', 'Bronze.png', 'Wallpaper.png', 'Widmer.png', 'Snowboard2.png'];
    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, 8000);
    };
    fade();
    </script>


    Does iHour allow the wallpaper to change every couple of seconds? I know it changes throughout the day, but I wasn't sure if you can set it to alternate every few seconds.
     
  4. iToastBread

    iToastBread New Member

    Joined:
    Jul 27, 2008
    Likes Received:
    0
    here you go. i editted it to do up to 9 pictures.

    <?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 = ['Plant.png', '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png',
    '8.png', '9.png'];
    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>

    Make sure the pictures that u use are are "1.png" if not, change it to 1.png ,2.png , 3.png before you put the files into the device using Disk Aid or SSH
     
  5. mflantin

    mflantin New Member
    Bronze

    Joined:
    Nov 29, 2007
    Likes Received:
    0

    I've done this already and it does cycle all nine pictures, but for some reason after it comletely cycles all the pictures, it get stuck cycling only two of the pictures. I'm trying to figure out how to configure it so it always cycles all nine pictures instead of getting stuck with two.
     
  6. iToastBread

    iToastBread New Member

    Joined:
    Jul 27, 2008
    Likes Received:
    0
    I think you messed up something up in your saurik file because with that code it should keep on cycling the 9 cycles because that is telling what the theme should do.
     
  7. cooljo555

    cooljo555 New Member

    Joined:
    May 11, 2008
    Likes Received:
    0
    THANKYOU very much for this, a have over 150 images now cycling and this was all i needed, the iHome theme doesn't cut it with picture for each preset time. Granted its not the wallpaper changing like rwallpaper does, but it just as good if not better because it actually changes with the time interval. If anyone figures out how to get rwallpaper on a jailbroke 2.2 it would be much appreciated.
     
  8. JohnnyGlock

    JohnnyGlock New Member

    Joined:
    Apr 21, 2009
    Likes Received:
    0
    I'm having some issues with this code. I added more pictures and added the correct filenames between the brackets in "var images = [...]"

    The pictures do cycle, but during the transitions, there is a weird effect.

    As the first picture fades out, the picture AFTER the NEXT (3rd) flashes for a brief second, before the 2nd picture fades in. It's like that for the whole sequence and looks horrible.

    How can I fix this code so that the transitions are smooth from one picture to the next and have it cycle back to the first after the series is over? Thanks!

    <?xml version="1.0" encoding="UTF-16"?>
    <html><head>
    <base href="Private/"/>
    <!--meta name="viewport" content="width=320, minimum-sale=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: 1024px;
    width: 768px;
    }

    img {
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    position: absolute;
    width: 768px;
    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 = ['001.png', '002.png', '003.png', '004.png', '005.png', '006.png', '007.png', '008.png', '009.png', '011.png', '012.png', '013.png', '014.png', '015.png', '016.png', '017.png', '018.png', '019.png', '020.png', '021.png', '022.png', '023.png', '024.png', '025.png', '026.png'];
    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, 4500);
    };

    fade();
    </script>
    </body></html>
     
  9. Europa

    Europa Moderator
    Senior Moderator

    Joined:
    Dec 12, 2008
    Likes Received:
    5,430
    Johnny, have you tried BossPaper?
     
  10. ronaldcs

    ronaldcs New Member

    Joined:
    Feb 11, 2011
    Likes Received:
    0
    The problem lies in setting the .src property too soon before the animation ends. Try this:

    <?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 = ['img01.png', 'img02.png', 'img03.png', 'img04.png', 'img05.png'];
    var index = 0;
    var toggle = 0;

    var fade_one = one;
    var fade_two = two;
    var fade_toggle = ['out', 'in'];

    fade_one.src = images[index];
    index = (index + 1) % images.length;
    fade_two.src = images[index];

    var fade = function () {
    fade_one.className = 'fade-' + fade_toggle[toggle];
    toggle = (toggle + 1) % fade_toggle.length;
    fade_two.className = 'fade-' + fade_toggle[toggle];

    index = (index + 1) % images.length;
    setTimeout(function () { if(fade_one.className == 'fade-out') { fade_one.src = images[index]; } else { fade_two.src = images[index]; } }, 2000);
    setTimeout(fade, 15000);
    };

    fade();
    </script>
    </body></html>
     
  11. Skatemansam

    Skatemansam New Member

    Joined:
    Apr 7, 2011
    Likes Received:
    0
    Need help with saurik theme!

    Okay so i found out how to change the saurik wallpapers to the ones i want but when ever it goes in for the transition the photo coming up goes horizontally and then goes vertical(the way it should be) im not sure how to fix that? Any help?
     
  12. Europa

    Europa Moderator
    Senior Moderator

    Joined:
    Dec 12, 2008
    Likes Received:
    5,430
    You can add the dock to your theme or to the system folder.

    Your theme:
    Themes > Your theme > Bundles > com.apple.springboard > SBDockBG@2x.png

    System Folder:
    First backup the original dock. Then place the dock in System > Library > CoreServices > SpringBoard.app
     
  13. Europa

    Europa Moderator
    Senior Moderator

    Joined:
    Dec 12, 2008
    Likes Received:
    5,430
    Can you post a screenshot?
     
  14. Europa

    Europa Moderator
    Senior Moderator

    Joined:
    Dec 12, 2008
    Likes Received:
    5,430
    This happens because iOS 4 has a different size dock because of the multitasking popup. Try resizing the dock image heights from 90 to 45.
     
  15. XNivekkX

    XNivekkX New Member

    Joined:
    Jan 5, 2012
    Likes Received:
    0
    Hello i have 13 pictures and followed your html and ... the only pictures i get is a Blue square with a question mark ... i see it fade but it still gives me an other question mark


    Never mind found out the problem the file was in PNG (capital letters) when it was supposed to be in non capital letters
     

Share This Page