I can't decide whether or not that is possible.
call me a n00b, but how do you loop through a directory (js)
Moderator: General Moderators
call me a n00b, but how do you loop through a directory (js)
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.
I can't decide whether or not that is possible.
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
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.
Please excuse my archaic javascript techniques. I have no idea what I'm doing
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);
});
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.
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.
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
Code: Select all
$(function(){Wayne
-
nickvd
- DevNet Resident
- Posts: 1027
- Joined: Thu Mar 10, 2005 5:27 pm
- Location: Southern Ontario
- Contact:
The easiest way to preload an image is to
Code: Select all
var newimg = new Image();
newimg.src = 'source.jpg';I tried:
EDIT: Neither did this:
that didn't work. how come?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]; }
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);
});