Picture of the Day Help

**rhlblue** · 12-15-2007, 02:08 AM

Hey everyone, its good to be back

So, I have made 31+ banners for my friend's website and I want that the banners should change everyday, and later when we make more like 60+ then make them change in every 12 hours.

Now i looked all over the internet a could only find this script

Code:

http://www.usefulclasses.com/index.php?aid=potd&prc=readArticle

Now I've spent many hours to make it work.....but it seems that their instructions are incomplete.......or i guess its me

But the main problem i'm facing is that i cannot configure the folder where the images are, i mean i have tried everything....but still can't get it work

Is there anyone here who could help me ? (of course there are many

)

Or is there any other script i could use instead of this.......I know how to make the images change randomly.....but i don't want that people should see all my banners in one day....its better when they change only once a day

Thanks once again !

**jscheuer1** · 12-15-2007, 07:40 AM

The fact that you are asking this question here, in the javascript forum, might be a tip off. The code you link to in your post is for a PHP enabled server, and is not javascript, or at least not entirely javascript. It cannot be tested locally without a PHP server or a PHP server emulator installed on your local machine.

I haven't really looked into the code, but the advantage of PHP (or almost any server side language) is that image files can be read from a directory without having to know their names. Which is very useful for code like this. You don't need to make up a list of the images, or name them in any particular way.

So, to begin helping you, it would be good if you could tell us if you understand the difference between server side code like PHP and client side code like javascript. Do you? And do you have a PHP enabled environment, either locally or on a server that you use, to test your code on?

**jscheuer1** · 12-15-2007, 09:43 AM

I was playing around with this idea a bit and came up with this 100% javascript (client side) script:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Daily Picture - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/* Daily Pic ©2007 John Davenport Scheuer
 * This notice must remain for legal use */
 
if(document.images&&document.getElementById)
var daily={
diurnal:true, //should script split between noon to midnight, midnight to noon if enough images are available? (true/false)
path:'file://localhost/C:/sites/mysite/images/', //set absolute path to images here, and list them (minimum 31 required) on the next line
pics:['1_side.jpg','2_side.jpg','3_side.jpg','5_side.jpg','8_side.jpg','leroy.jpg','leroy_o.jpg','lilac.jpg','lilac_sm.jpg','photo1.jpg','photo10.jpg','photo1_h1.jpg','photo1_h2.jpg','photo1_thumb.jpg','photo2.jpg','photo2_h1.jpg','photo2_h2.jpg','photo2_thumb.jpg','photo3.jpg','photo3_h1.jpg','photo3_h2.jpg','photo3_thumb.jpg','photo4.jpg','photo4_h1.jpg','photo4_h2.jpg','photo4_thumb.jpg','photo5.jpg','photo5_h1.jpg','photo5_h2.jpg','photo5_thumb.jpg','photo6.jpg','photo6_h1.jpg','photo6_h2.jpg','photo6_thumb.jpg','photo7.jpg','photo7_h1.jpg','photo7_h2.jpg','photo7_thumb.jpg','photo8.jpg','photo8_h1.jpg','photo8_h2.jpg','photo8_lrg.jpg','photo8_thumb.jpg','photo9.jpg','photo9_h1.jpg','photo9_h2.jpg','photo9_lrg.jpg','photo9_thumb.jpg','thumb1.jpg','thumb2.jpg','thumb3.jpg','35.gif','36.gif','37.gif','38.gif','40.gif','dynamicbook1.gif'],
///////////////// Stop Editing /////////////////
tag:function(){return document.getElementById('dcontent');},
d:new Date().getDate()-1,
h:function(){return new Date().getHours()<12? 0 : 1;},
img:document.createElement('img'),
pic:function(){
var d=daily;
for (var a=[], i = 0; i < d.pics.length; ++i)
a.push([d.pics[i++], d.pics[i]]);
d.img.src=d.diurnal&&a[d.d][d.h()]? d.path+a[d.d][d.h()] : d.path+d.pics[d.d];
d.img.title=d.img.alt='Daily Image';
d.tag().appendChild(d.img);
}};
if(document.images&&document.getElementById)
window.onload=daily.pic;
</script>
</head>
<body>
<div id="dcontent"></div>
</body>
</html>

Notes: You need at least 31 images, and since there is no PHP involved, they must be listed. Once you have more, and even for only 31 images for dates 1 to 15, it will start to pick midnight to noon and noon to midnight for those dates where enough images are available to do so. If there aren't enough images for a given date, it will revert to a daily pick. Images will be selected in order listed according to the day of the month number, and by twos according to 0hr to 12hr vs. 12hr to 0hr if enough are available. This 'diurnal' behavior can be set to false, then only images 1 to 31 will be used.

**rhlblue** · 12-15-2007, 08:20 PM

man like i said long time back...... YOU ROCK !

and you really do, cauz u work so hard man :P

anyways, sorry for posting it in the js section, actually i really was not interested in that script that much, so i was basically looking for alternatives, as well as how to make that one work !

thanks for the alternative

, i will try it now and inform u if it works (i know it will

)

so just one question, which one is more SE friendly ? the php or the js ?

and if needed, then i can setup a test server where i will upload that php script and give u the infos.... ? ( only if u have any interest in it :P )

and finally, yes i know the difference between php and js

and have quite a good experience in dhtml etc........i just asked the question in a little Noob style

hehe lol

thanks once again!

**rhlblue** · 12-15-2007, 09:46 PM

ok so i have like 124 + images now

how can i make them change on every 6 hours ? .....so that the 124+ images gets to be viewed every month ?

first i had in mind that only 31 images will be there and then they will change every day once and then back to start from the first day.....

but now i have 124......but i still want them be get to 1 again from next month.....a simple math says that 4 images a day will work....so they gotta change every 6 hours....

what is the best way for that ? ......and can we make the images listed on a another file ?
something like images.txt in which all the links are.......

thanks.....sorry for buggin

Edit : ok so for the javascript .....i'm gonna use it as external....so i don't need the images to be in a third file now....so no need for images.txt now

btw.....the script works fine

.....but i guess its only gonna use the first 61-62 images.....thats 2 a day......but i want 4 a day ...... i changed the 12 to 6 in

Code:

h:function(){return new Date().getHours()<12? 0 : 1;},

but i guess its of no use.....or is it ?

thanks again!

**jscheuer1** · 12-16-2007, 12:33 AM

For four, you would need two code changes. This line:

Code:

h:function(){return new Date().getHours()<12? 0 : 1;},

would become:

Code:

h:function(){var h; return (h=new Date().getHours())<6? 0 : h<12? 1 : h<18? 2 : 3;},

This line:

Code:

a.push([d.pics[i++], d.pics[i]]);

would be:

Code:

a.push([d.pics[i++], d.pics[i++], d.pics[i++], d.pics[i]]);

124 images would be required for a unique image every 6 hours. Less than that, and there will be some repeats. More than that, some will never be seen. I'll think about this a bit, with cookies, or perhaps some other approach, all images of any number could probably be shown to most users on a 6hr rotational basis. In fact, if you are going over 124 images and still want to switch out every 6 hours, why not just forget about the date, and go for an image to each 6hr period until all are used, and then start over?

**rhlblue** · 12-16-2007, 01:21 AM

u really came back to answer my questions ?
man i got tears in my eyes.....u should win the best noob helper :P lol

well, thanks for the new code.....and yes really....i'm not bothered about the date....just want a new banner every 6 hours

thanks for all the help.....

-rhl

**rhlblue** · 12-16-2007, 02:14 PM

hey, well, the script works awesome

and i've really started to like it now

only tho.....i'm facing 2 problems.....first i when i was trying to use the java script as external....it was only loading in the index page.....the other pages were blank....

then i went on and installed <head> tags in the header.php file.....so now its loading the images in all pages... .

but the image is the last thing that loads in the page.....and i "guess" its not caching also ...... how can i make the image load first ?
and can i put more than one rotating images in a page ?

i mean 2 or 3 ?

btw......its being used in a vbulletin forum as a header......my header is liquid....so there is a 1px background image.....and one on t he left side and one on the right side......right now only the right side images are rotating ...... now i want to put the same kind of thing in the footer also.....so in the footer....both the right side and left images will rotate...

means a total of 3 images rotating in a page.....but the footer images will only change once a day.....so the header is 6 hours and footer is 24 hours

thanks once again....and sorry for double posting !

**jscheuer1** · 12-16-2007, 04:13 PM

The image probably is caching, but the event which places it on the page doesn't occur until after the page is loaded, hence the delay, even for a cached image. Given that fact, other facts about the situation as you describe it, and your new requirements, this modification would probably be more suitable:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Daily Picture - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/* Daily, Diurnal and Quaternary Pic ©2007 John Davenport Scheuer
 * This notice must remain for legal use */
 
if(document.images&&document.getElementById)
var daily={
path:'file://localhost/C:/sites/mysite/images/', //set absolute path to images here, and list them (minimum 31 required each set) on the next line
pics1:['1_side.jpg','2_side.jpg','3_side.jpg','5_side.jpg','8_side.jpg','leroy.jpg','leroy_o.jpg','lilac.jpg','lilac_sm.jpg','photo1.jpg','photo10.jpg','photo1_h1.jpg','photo1_h2.jpg','photo1_thumb.jpg','photo2.jpg','photo2_h1.jpg','photo2_h2.jpg','photo2_thumb.jpg','photo3.jpg','photo3_h1.jpg','photo3_h2.jpg','photo3_thumb.jpg','photo4.jpg','photo4_h1.jpg','photo4_h2.jpg','photo4_thumb.jpg','photo5.jpg','photo5_h1.jpg','photo5_h2.jpg','photo5_thumb.jpg','photo6.jpg','photo6_h1.jpg','photo6_h2.jpg','photo6_thumb.jpg','photo7.jpg','photo7_h1.jpg','photo7_h2.jpg','photo7_thumb.jpg','photo8.jpg','photo8_h1.jpg','photo8_h2.jpg','photo8_lrg.jpg','photo8_thumb.jpg','photo9.jpg','photo9_h1.jpg','photo9_h2.jpg','photo9_lrg.jpg','photo9_thumb.jpg','thumb1.jpg','thumb2.jpg','thumb3.jpg','35.gif','36.gif','37.gif','38.gif','40.gif','dynamicbook1.gif','36.gif','37.gif','38.gif','40.gif','dynamicbook1.gif','36.gif','37.gif','38.gif','40.gif','dynamicbook1.gif'],
pics2:['lilac_sm.jpg','photo1.jpg','photo10.jpg','photo1_h1.jpg','photo1_h2.jpg','photo1_thumb.jpg','photo2.jpg','photo2_h1.jpg','photo2_h2.jpg','photo2_thumb.jpg','photo3.jpg','photo3_h1.jpg','photo3_h2.jpg','photo3_thumb.jpg','photo4.jpg','photo4_h1.jpg','photo4_h2.jpg','photo4_thumb.jpg','photo5.jpg','photo5_h1.jpg','photo5_h2.jpg','photo5_thumb.jpg','photo6.jpg','photo6_h1.jpg','photo6_h2.jpg','photo6_thumb.jpg','photo7.jpg','photo7_h1.jpg','photo7_h2.jpg','photo7_thumb.jpg','photo8.jpg'],
///////////////// Stop Editing /////////////////
tag:function(id){return document.getElementById(id);},
d:new Date().getDate()-1,
h:function(b){var h; return (h=new Date().getHours())<6? 0 : h<12? (b==2? 0 : 1) : b==2? 1 : h<18? 2 : 3;},
pic:function(id, p, b){
var img, s, d=daily, pics=d['pics'+(p? p : '1')];
for (var a=[], i = 0; i < pics.length; ++i)
if(b==4)
a.push([pics[i++], pics[i++], pics[i++], pics[i]]);
else if(b==2)
a.push([pics[i++], pics[i]]);
img=d.tag(id).getElementsByTagName('img')[0];
img.src=(s=a[d.d]&&a[d.d][d.h(b)])? d.path+a[d.d][d.h(b)] : d.path+pics[d.d];
img.title=img.alt=s&&b==4? 'Quaternary Image' : s&&b==2? 'Diurnal Image' : 'Daily Image';
}};
else var daily={pic:function(){return;}};
</script>
</head>
<body>
<div id="dcontent"><img alt="Default Image" title="" src="file://localhost/C:/sites/mysite/images/1_side.jpg"></div>
<script type="text/javascript">
daily.pic('dcontent', 1, 4);
</script>
<div id="dcontent2"><img alt="Default Image" title="" src="file://localhost/C:/sites/mysite/images/photo1_h1.jpg"></div>
<script type="text/javascript">
daily.pic('dcontent2', 2, 0);
</script>
</body>
</html>

Notes: There is still the 31 picture minimum. You can now define an unlimited number of arrays of images. They each should be in the form of

pics#=['item','item'],

as shown in the above for pics1 and pics2.

As you can see in the body, there are now two short scripts, each will load the new image as soon as possible, that way, once an image is cached, it will load up quite quickly, like any other cached image.

Now, you may have as many of these short scripts following containers. Each container should (as shown) have a unique id and some one default image in it for non-javascript enabled users, and to be used by this version of the script.

The parameters for the function are:

Code:

daily.pic('unique_id_of_container', picarray#, behavior)

The unique id is self explanatory and must be quoted. The picarray# is the number corresponding to the number suffix of the array to use. The behavior is 0 (daily), 2 (every 12 hrs), or 4 (every 6 hours). Again, it doesn't matter how this is set if there aren't enough images, it will default to daily if it can't find enough images.