| View previous topic :: View next topic |
| Author |
Message |
EvilSparx
Expert Cheater
 Reputation: 0
Joined: 29 Nov 2008
Posts: 175
Location: Behind You!
|
 Posted: Sat Jun 06, 2009 5:22 pm Post subject: Help on this HTML code. |
 |
|
I have a html code
basically, all it does is get pictures from the folder "Wallpaper" and every 60 seconds, it uses a random image form the Wallpaper folder and displays it.
| Code: | <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 {
position: absolute;
width: 320px;
height: 480px;
}
img.fade-out {
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head>
<body>
<img id="img1" class="fade-in">
<img id="img2" class="fade-out">
<script>
var interval = 10 * 60; // Seconds between change (must be > duration)
var imageDir = "./Wallpapers/"; // The path containing the images
var duration = 10; // The transition's duration in seconds
// (must match -webkit-transition-duration above)
var images = [ // List of image filenames
"1.jpg",
"2.jpg",
"3.jpg"
];
//// You shouldn't need to change anything below ////
var index = 0;
var imageCount = images.length;
var randomize = function(){
return Math.round(5 - 10 * Math.random());
};
var fade = function(){
img1.style.zIndex = 1;
img2.style.zIndex = 2;
img1.className = "fade-in";
img2.className = "fade-out";
index = (index + 1) % imageCount;
if(!index){
images.sort(randomize);
}
var tmp = img1;
img1 = img2;
img2 = tmp;
setTimeout(function(){img1.src = imageDir + images[index];}, duration * 100);
setTimeout(fade, interval * 100);
};
images.sort(randomize);
img1.src = imageDir + images[index];
fade();
</script>
</body>
</html>
|
And i want it to use any image in the file called wallpaper without having to define it in the code.
eg
i tried this
| Code: | var images = [ // List of image filenames
"*.*",
]; |
But no pictures showed up when i opened the html
_________________
Banhammer = Fail
 |
|
| Back to top |
|
 |
iTz SWAT
I post too much
 Reputation: 1
Joined: 20 Dec 2007
Posts: 2227
Location: Me.Location;
|
| Posted: Sat Jun 06, 2009 6:51 pm Post subject: Re: Help on this HTML code. |
|
|
| EvilSparx wrote: | I have a html code
basically, all it does is get pictures from the folder "Wallpaper" and every 60 seconds, it uses a random image form the Wallpaper folder and displays it.
| Code: | <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 {
position: absolute;
width: 320px;
height: 480px;
}
img.fade-out {
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head>
<body>
<img id="img1" class="fade-in">
<img id="img2" class="fade-out">
<script>
var interval = 10 * 60; // Seconds between change (must be > duration)
var imageDir = "./Wallpapers/"; // The path containing the images
var duration = 10; // The transition's duration in seconds
// (must match -webkit-transition-duration above)
var images = [ // List of image filenames
"1.jpg",
"2.jpg",
"3.jpg"
];
//// You shouldn't need to change anything below ////
var index = 0;
var imageCount = images.length;
var randomize = function(){
return Math.round(5 - 10 * Math.random());
};
var fade = function(){
img1.style.zIndex = 1;
img2.style.zIndex = 2;
img1.className = "fade-in";
img2.className = "fade-out";
index = (index + 1) % imageCount;
if(!index){
images.sort(randomize);
}
var tmp = img1;
img1 = img2;
img2 = tmp;
setTimeout(function(){img1.src = imageDir + images[index];}, duration * 100);
setTimeout(fade, interval * 100);
};
images.sort(randomize);
img1.src = imageDir + images[index];
fade();
</script>
</body>
</html>
|
And i want it to use any image in the file called wallpaper without having to define it in the code.
eg
i tried this
| Code: | var images = [ // List of image filenames
"*.*",
]; |
But no pictures showed up when i opened the html |
I'm not exactly sure but I think you need to define each image.
E.G
Image[0] = '1.gif'
Image[1] = '2.gif'
Image[2] = '3.gif'
Image[3] = '4.gif'
something like that.
Go through these...
http://www.google.com.au/search?hl=en&q=html+random+image&btnG=Google+Search&meta=&aq=f&oq=
_________________
|
|
| Back to top |
|
|
tombana
Master Cheater
![]() Reputation: 2
Joined: 14 Jun 2007
Posts: 456
Location: The Netherlands
|
| Posted: Sun Jun 07, 2009 7:35 am Post subject: |
|
|
| If the picture folder is on the server, you'll have to list all the images yourself since the client-sided javascript can't browse the server-side folder.
|
|
| Back to top |
|
|
Guy
Expert Cheater
![]() Reputation: 0
Joined: 30 May 2009
Posts: 187
|
| Posted: Sun Jun 07, 2009 8:25 am Post subject: |
|
|
| tombana wrote: | | If the picture folder is on the server, you'll have to list all the images yourself since the client-sided javascript can't browse the server-side folder. |
Unless you use AJAX, parsing the response by the server.
|
|
| Back to top |
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
