Programming

Hi guys,

Ok first, let me explain what I want to do. I'm making a theme for the iphone, and I found a nice wallpaper slideshow script. Here is how it knows which wallpapers to use:

[code]
<script type="text/javascript">
// SLIDE ROTATION FREQUENCY (in minutes)
var slideRotation = 0.4;
// SLIDES - they can point to any location on your phone, or a url on the internet
// image - The location of the image to display, such as a location on your phone
// or a url on the internet.
// zoom - The starting level of zoom.
// origin - Use this property to change the starting origin of the zoom. The origin
// is expressed as a percentage of the size of the element (x and y). For
// example, the default value 50% 50% causes the zoom to start at the center
// of the slide. Changing the origin to 100% 0% causes transformation to
// occur around the top-right corner of the slide, etc.
var slide = [
{ image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper13.png", zoom: "100%", origin: "53% 20%" }, { image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper1.png", origin: "53% 28%" }, { image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper2.png", origin: "53% 20%" }, { image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper3.png", origin: "53% 20%" }, { image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper4.png", origin: "53% 20%" }, { image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper5.png", origin: "53% 20%" },
{ image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper6.png", origin: "0% 40%" },
{ image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper7.png", origin: "85% 5%" }, { image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper8.png", origin: "85% 5%" }, { image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper9.png", origin: "85% 5%" },
{ image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper11.png", origin: "53% 20%" },
{ image: "/Library/Themes/iMatte UI.theme/slides/Wallpaper12.png", origin: "84% 23%" },
];
</script>
[/code]

Would there be a way of telling it to look in a specific directory and use all, let say, Wallpaper*.png and build the variable array with it? And maybe have random origin values? So they are all coming from a different angle?

Thanks, I would really appreciate if that could be made possible!

I would start with creating a more modular design, such as:

Code:

var dir = "/Library/Themes/iMatte UI.theme/slides/";

If the directory is variable you could use the following (and keeping variable dir above):

Code:

var subdir = ["subdir1", "subdir2", ...];
var slide[1] = [dir+subdir[1], "100%", "53% 20%"];
var slide[2] = [dir+subdir[2], "100%", "53% 28%"];
etc

Randomisation in javascript is trivial, best to consult some online sources for examples. Hope this helps.

Hi there,

Thank you for answering me.

Hmmm, I really dont know javascript much. I can read code and guess what it does, and modify it a bit, but I couldnt come up with something myself right now.

Looking at this code, I'm wondering how it tells to use all *.png from the var dir. Do var dir = "/Library/Themes/iMatte UI.theme/slides/"; load all files from that directory automatically, or I have to write something else to do that?

I'm looking for something like the for loop in bash scripting. Something that would use all files that matches a certain pattern, and that pattern would be either *.png or Wallpaper*.png.

The slides directory will never change, but looking at your code, and the subdir variable, I know how I could use that efficiently, I could make some different packs based on different themes. Like a nature wallpapers slideshow, a cars wallpapers slideshow and so on. And each would contain a dozen images each. So I could use all the code you wrote for me, but looking at it, I would still have to define each wallpapers by hand? Or am I wrong?

Thanks for helping me out.

Yes, you have to define each wallpaper by hand. Javascript does not do file management.