Google Answers Logo
View Question
Q: JavaScript to display images ( Answered 5 out of 5 stars,   1 Comment )
Subject: JavaScript to display images
Category: Computers > Programming
Asked by: pigskinreferee-ga
List Price: $20.00
Posted: 02 Apr 2006 05:50 PDT
Expires: 02 May 2006 05:50 PDT
Question ID: 714582
I am looking for a JavaScript script that will run on a FreeBSD 5.4 OS
with Perl 5.8.8 installed.

I have a collection of images saved in a directory that I want to
display one at a time on a daily basis on a web page. I need a script
that could sort the files in a given directory and display the first
one in the web page I am creating. After 12 midnight the the script
would move the previously displayed image to a new location and
display the next image in the directory.

The directory structure for the stored images is:


I would like to store the displayed images under the 'image' directory.

I am not sure if this can even be accomplished with Java, but I
thought I would give it a try. The alternative would be to try and do
something with Perl and run it from CRON perhaps.

Please contact me if you require further information.

Request for Question Clarification by palitoy-ga on 02 Apr 2006 06:08 PDT
Hello pigskinreferee-ga,

Javascript only works on the browser side so it would not be able to
move the files on your server.  I would recommend writing a small Perl
script to do this.  (Please remember that Javascript is also not the
same as Java!)

Can you please give me a little more information on the names of the
pictures and the directories to be used?   You also say the script
should "sort" the pictures, how should they be sorted?  Do the
pictures have to be moved or can they be left in the directory?

I have a solution in mind that will solve your problem.  Let me know
the answers to these questions and I will post my solution for you...


Request for Question Clarification by palitoy-ga on 02 Apr 2006 06:25 PDT
Please also indicate if a solution in PHP would be acceptable (this
would probably  be the easiest to set up).

Subject: Re: JavaScript to display images
Answered By: palitoy-ga on 02 Apr 2006 08:37 PDT
Rated:5 out of 5 stars
Hello pigskinreferee-ga,

Thank-you for your question.  I look forward to hearing your comments
on my script - I can alter it if it is not exactly what you require. 
I wanted to post something here for you to peruse before you reply to
my clarifications.

If you require the images still to be moved I can easily build this in
to the script for you although I think it may not be necessary
depending on your exact requirements and the number of images in the

You should place the script below into the directory of images on your
server (set the permissions of the script to chmod 755).

When run the script will calculate the current day of the year (the
number of days since January 1st) and the number of JPG images in the
directory.  If there are more images in the directory than days in the
year then the script will have to be altered.

If there have been more days in the year so far than there are number
of images in the directory the script will simply begin displaying
each image from the beginning again.  The script will loop through
each image in the directory before displaying it twice.  The images
are sorted alphabetically.

The script stores the name of each image file in an array and outputs
the image depending on the day of the year.

To display an image simply use this in your HTML:
<img src="">

If any of this is unclear please take a close look at the script and
ask for clarification.  I will try to respond as swiftly as possible. 
Likewise if you do still require the images to be moved or anything
else changing please ask for clarification.


# find out the day of the year
my $day_of_year = (localtime(time()))[7];

# define the path where the images live "." is the current directory
$path = ".";
# read all the jpg filenames from the directory into an array
opendir(DIR, $path);
@files = grep { /\.jpg$/i } readdir(DIR);

# sort the filenames alphabetically
@files = sort( {lc $a cmp lc $b} @files);

# count the number of images
$no_of_images = scalar(@files);

# Now the fun bit :)  We loop through the images once before
# repeating them in the same order.  If we divide the current
# number of day of the year by the number of images in the
# directory we get the number of times have repeated the images.
# We are interested in the remainder of this calculation (this
# is calculated using the % operator).  Note - there must be
# less than 365 images in the directory!  We need to subtract
# one from this number because arrays start at zero not 1!
if ( $no_of_images <= $day_of_year ) {
  $image_to_use = ($day_of_year % $no_of_images)-1;
else {
  $image_to_use = $day_of_year-1;
print "Location: $files[$image_to_use]\n\n";

Request for Answer Clarification by pigskinreferee-ga on 03 Apr 2006 08:41 PDT
Looks great. I do have just a few questions.

1) If there are 'gif' or 'png' files in the directory, will they also be displayed?

2) Can I add files from time to time, or once this script runs for the
first time am I locked into the number of files in the directory? Not
a big problem, I was just wondering. I probably would not be adding
anything once I have the files in place anyway.


Clarification of Answer by palitoy-ga on 03 Apr 2006 09:44 PDT
As it currently stands the script only finds jpg images but this is
easily changed...

In the script locate this line:

@files = grep { /\.jpg$/i } readdir(DIR);

Change it to:

@files = grep { /\.(jpg|gif|png)$/i } readdir(DIR);

If you want to add any other image extensions simply add the type in
between the brackets as I have done above.  (This line works by using
a regular expression to check the filename ends with one of the 3
extensions - jpg, gif or png.)

If you want to add further images to the directory just place them
into the directory :)  If the number of images exceeds 365 we may
start running into problems but that is a rather large number of
pictures in one directory any way!

This is how it works, at the moment let's say you have pictures named
A, B and D.  On the first day someone accesses your page they will see
picture A, then next day picture B, then picture D.  On the fourth day
they will loop back and see see picture A again.

If we then added another picture - lets call it C - that would now be
the third picture that is displayed in the loop (display order
A-B-C-D) and it would take 4 days until the pictures start to be
repeated.  It would not be the last picture displayed in the loop
because the pictures are sorted alphabetically.

If you are still a little unsure please ask for clarification again. 
Please also let me know if there is anything else you require doing to
the script.
pigskinreferee-ga rated this answer:5 out of 5 stars and gave an additional tip of: $5.00
A perfect solution to my question. I am very please with it. It was
delivered exceptionally quick also.

Subject: Re: JavaScript to display images
From: palitoy-ga on 04 Apr 2006 04:57 PDT
Thank-you for the 5-star rating, kind comments and tip!  They are all appreciated.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy