PDA

View Full Version : 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


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 :o

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 :D)

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 :rolleyes:

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:


<!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.j pg','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 :D)

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 :o
and have quite a good experience in dhtml etc........i just asked the question in a little Noob style :eek:

hehe lol

thanks once again!

rhlblue
12-15-2007, 09:46 PM
ok so i have like 124 + images now :D
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 :D
btw.....the script works fine :D .....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


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:


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

would become:


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

This line:


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

would be:


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 :D

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 ? :D

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:


<!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.j pg','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','ph oto3.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','photo 5_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','ph oto8.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, pics, 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[I]#=['[I]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:


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.

rhlblue
12-16-2007, 08:34 PM
thank you god for sending this man to earth :D

man u are amazing, all i can say is

THANKS A LOT :D

have a nice day! :)

Henrik N-K
01-25-2008, 02:39 PM
Hi there,

I just found this wonderfull script, but I have some difficulties getting the script to locate the pictures.

path:'file://localhost/C:/sites/mysite/images/'

My provider has informed me the absolut path to my site on their server, but still without any luck ... Let's say my path is d:/home/testdk/www/images/feb
Do I leave 'file://localhost/ in front or? I must admit that I have tried both without any luck. Any ideas to what I doing wrong?

Im very sorry that I have to bother you with such a simple question - but then again everything is simple when you know how ;-)

jscheuer1
01-25-2008, 04:15 PM
The path you should use is the same path you would use in an image tag's source attribute for a normal image:


<img src="some.jpg">

No path if the image is in the same folder as the page. If the image is in the 'images' folder and the 'images' folder is off of the root of the domain:


<img src="/images/some.jpg">

etc. Or in our script:


path:'/images/', //set absolute path to images here, and list them (minimum 31 required each set) on the next line


You can also include the domain address in the path to the folder (this is generally the safest method), ex:


path:'http://www.mydomain.com/images/', //set absolute path to images here, and list them (minimum 31 required each set) on the next line


Just by way of explanation, on a local machine, on the main C drive:


file://localhost/C:/

is equivalent to the domain address:


http://www.mydomain.com/

for a live page. Make sure to use your domain though.

Henrik N-K
01-25-2008, 04:26 PM
Thanks a million, it was acutally the / at the end that was missing ...

blurrycloud
01-29-2008, 06:46 AM
how about i want my images to switch every 3 minutes or every 1 minute i guess? is it possible?
thanks in advanced for your reply

jscheuer1
01-29-2008, 03:42 PM
how about i want my images to switch every 3 minutes or every 1 minute i guess? is it possible?
thanks in advanced for your reply

For that you would really be talking more about a slide show, a very slow slide show albeit, but a slide show all the same. There are many slide show scripts available here:

http://www.dynamicdrive.com/dynamicindex14/index.html

and elsewhere around the web. Many can be configured as to the interval between slides, you would want to set that interval pretty high for a 1 or 3 minute wait between images. But there is no reason why it can't be done that way.

blurrycloud
01-29-2008, 09:59 PM
For that you would really be talking more about a slide show, a very slow slide show albeit, but a slide show all the same. There are many slide show scripts available here:

http://www.dynamicdrive.com/dynamicindex14/index.html

and elsewhere around the web. Many can be configured as to the interval between slides, you would want to set that interval pretty high for a 1 or 3 minute wait between images. But there is no reason why it can't be done that way.

ah ok.. but i want it to get the images placed inside my site itself.. i already have slideshows.. but i want to explore using this trick... by the way i already tried this trick and i think this is not working in MSIE 5+ but in Firefox it's working perfectly...

LarryPexter
12-31-2012, 01:33 PM
Hi;

I know this code has been around for a while, but I recently implemented it for a SharePoint project that I was working on. I'm using 27 images for my implementation. The code worked well initially and was changing the images. All of a sudden it is not showing images, and when I property it i get "udefined" where the image should be. I am fairly new to javascript, so I'm at a loss as to how to troubleshoot this. Can anyone give me any pointers on how to solve this?
Thanks for any and all suggestions

jscheuer1
12-31-2012, 05:48 PM
A minimum of 31 images is required. The reason you are now getting undefined is that we are past the 27th of the month. On New Years day it would start working again, until Jan 27th. Add 4 more images.

djr33
01-01-2013, 12:07 AM
Also, there's no reason you couldn't use the same images if you only have 27. Just add them as "new" images in the list. (You should probably pick some from the middle of the month or something so you don't repeat them too quickly.)

vwphillips
01-01-2013, 01:52 PM
just playing with this


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
<script type="text/javascript">
/*<![CDATA[*/

function zxcDailyImage(hrs){
var ary=['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif ','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif','31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.g if','38.gif','39.gif','40.gif','41.gif','42.gif'];
var now=new Date(),d=now.getDay(),h=now.getHours()+1;
document.Show.Show0.value=ary[Math.floor((24*d+h)/hrs)%ary.length];


}

zxcDailyImage(6); // 1 - 12 hours allowed
/*]]>*/
</script></body>

</html>