Page 1 of 1
call me a n00b, but how do you loop through a directory (js)
Posted: Thu May 10, 2007 1:41 pm
by Luke
I'm trying to set up a "random image" script for the front page of a website. I want to give a function a directory and have it look through the files in the directory and grab one at random. Is that possible? I'm so lame with javascript!
I can't decide whether or not that is possible.
Posted: Thu May 10, 2007 1:50 pm
by Chris Corbyn
JavaScript cannot access the filesystem. Why not do it with PHP on the backend?
Posted: Thu May 10, 2007 2:32 pm
by Luke
meh, I think I'll just provide an array. I won't be changing the images much. I have decided to have the images rotate at like 3 second intervals. The problem... the image src is changed before the image is loaded, causing a flicker. Any advice?
Please excuse my archaic javascript techniques. I have no idea what I'm doing

Also, this uses jquery.
Code: Select all
var i = 0;
var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg'];
var imagePath = 'images/layout/home_page_rotation/';
function getNextImage()
{
i = (i >= 5) ? 0 : i+1;
return imagePath + images[i];
}
function switchImage()
{
$('#main_photo')
.css('width', $('#main_photo .rotate').width())
.css('height', $('#main_photo .rotate').height())
.fadeOut('slow', function(){ //callback after fadeout
$('#main_photo .rotate').attr('src', getNextImage());
$(this).fadeIn('slow');
});
}
$(function(){
// I tried preloading them here, no luck! :(
for (var a in images)
{
var img = new Image();
img.src = imagePath + images[a];
}
setInterval ("switchImage()", 3000);
});
Posted: Thu May 10, 2007 2:38 pm
by Luke
also, it would be WAY cool if I could have one fade in while the other fades out. How could I go about that%AC
Posted: Thu May 10, 2007 2:49 pm
by guitarlvr
could you create a flash application that chooses random images and does the fade in/fade out?
Wayne
Posted: Thu May 10, 2007 3:02 pm
by Luke
I guess I could. I'd rather figure this out though.
Posted: Thu May 10, 2007 3:07 pm
by guitarlvr
Check
this out. Is that what your looking for? (at least for fade in/out).
Wayne
Posted: Thu May 10, 2007 3:13 pm
by Luke
thank you, that is what I want, but I'm using jquery for it. You can see the results here:
http://store.tarmadesigns.com
See the flicker? That's the issue I am having. Has nothing to do with the fadein method. I just need to know how to get the images loaded before the src of the image is changed and it fades back in.
Posted: Thu May 10, 2007 3:19 pm
by guitarlvr
After the images have been loaded the first time through, the next time the flicker disappears. Above where you commented out the pre-load, you have:
Is that open paren supposed to be there between the dollar sign and function?
Wayne
Posted: Thu May 10, 2007 3:25 pm
by guitarlvr
This might work. try something like
this for image pre-load.
Wayne
Posted: Thu May 10, 2007 3:27 pm
by nickvd
The easiest way to preload an image is to
Code: Select all
var newimg = new Image();
newimg.src = 'source.jpg';
Posted: Thu May 10, 2007 3:30 pm
by Luke
I tried:
my first post wrote:Code: Select all
// I tried preloading them here, no luck! :(
for (var a in images)
{
var img = new Image();
img.src = imagePath + images[a];
}
that didn't work. how come?
EDIT: Neither did this:
Code: Select all
var i = 0;
var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg'];
var imagePath = 'images/layout/home_page_rotation/';
function getNextImage()
{
i = (i >= 5) ? 0 : i+1;
return imagePath + images[i];
}
function switchImage()
{
$('#main_photo')
.css('width', $('#main_photo .rotate').width())
.css('height', $('#main_photo .rotate').height())
.fadeOut('slow', function(){ //callback after fadeout
var nextImage = getNextImage();
var img = new Image();
img.src = nextImage;
$('#main_photo .rotate').attr('src', img.src);
$(this).fadeIn('slow');
});
}
$(function(){
setInterval ("switchImage()", 3000);
});