Viewing Thread:
"PHP/Javascript Slideshow"

I am using PHP to read images from a file, and then Javascript and HTML to create a random slideshow. The problem is, the images rotate perfectly when running the script in Apache/XAMPP, but when I upload them to freeola and view my site, they do not rotate. I have emailed tech support, who think it should work. I have tried just "./pics" as the file path, and also "/home/sites/vip*******/httpd/htdocs/photos" in both the javascript and PHP. Here is the code I have adapted from whats already out there (which I'm sure will be useful to some!!) - it's in two seperate files...

Thanks in advance for any help...I should probably add I am a bit new to this!

<?
Header("content-type: application/x-javascript");
function returnimages ($dirname= "/home/sites/vip******* /httpd/htdocs/photos")
{
$pattern='(.jpg$)|(.png$)|(.jpeg$)|(.gif$)i';
$curimage = 0;
if ($handle = opendir($dirname))
{
while (false !== ($file = readdir($handle)))
{
if (eregi($pattern, $file))
{
echo 'galleryarray['.$curimage.']="'.$file .'";' . "n";
$curimage++;
}
}
closedir($handle);
}
}
echo 'var galleryarray=new Array();' . "n";
returnimages();
?>


<script src="images.php"></script>
<script language="javascript">
var randomImg=0;

function rotateimages()
{
randomImg = Math.floor(Math.random()*galleryarray.length-1);
document.getElementById ("slideshow").setAttribute("src", "photos/" +galleryarray[randomImg]);
}

window.onload=function()
{
setInterval("rotateimages()", 3000);
}
</script>


JFro wrote:
> It should have been getImages.php not getimages.php.
>
> For some reason it looks like Apache ignores the case and
> Freeola does not...(I have tried to change the name of getImages
> to getimages in Vista, it counts it as the same, and won't let
> me)....best watch out for that one then!

It's not actually Apache vs Freeola, but Windows vs Linux/Unix operating systems; Windows is case insensitive, but Linux/Unix is case sensitive.

The general rule for the web is, make all file names and directories fully lowercase. To change the case in Windows, first rename it to something like 'getimages2.php', then rename it again to 'getimages.php'.

The assumption made by readers when looking at problem code is that it's the actual code that is being run. It's important to ensure that any code that is pasted to the forums should be a straight copy and paste of the latest code that is being used, otherwise the problem we think we are trying to solve is likely to be different from the actual problem. A simple thing like mixed case file names, for instance, would have been an easy thing to identify if present in the code, but virtually impossible to guess, if not.

That said, in this case, it wouldn't have helped since the mixed case file name was already on the server and there would have been no way of knowing that from the latest code alone.

So, note to self: add mixed case file name question to check list... ;o)

It works!

It was indeed , so thanks for drawing my attention to that Garin.

It should have been getImages.php not getimages.php.

For some reason it looks like Apache ignores the case and Freeola does not...(I have tried to change the name of getImages to getimages in Vista, it counts it as the same, and won't let me)....best watch out for that one then!

Thanks for your help :)

Your problem at the moment is that you've got

<script src="getimages.php"></script>

but getimages.php is producing a 404. I'm guessing its uploaded in a different place or its permissions are wrong (unlikely).

Pi - thanks for the great explanation...now you'll be suprised when I say I have a computer science degree and didn't know that!!!

I have followed it step-by-step (I think). I am using FileZilla as my FTP, so I right clicked on the htdocs on Freeolas server and set all files and directories to 775, so hopefuly thats ok...still no luck though.

I have tried the Error Consol on Firefox....I'm just getting 'gallery array is not defined', many times (as its a loop), and no elaboration on that!
But I am also getting other warnings about files that aren't mine...

Error: invalid XML markup
Source File: http://registration.freeola.net/errors/e.php?ec=404
Line: 98
Source Code: for (i = 25; i > 0; i--) {


jessica-elyn.co.uk is the URL of the website causing the problems. I bet it's something really simple, usually is isn't it!!

JFro wrote:
> As for permissions and binary/ASCII...that's a bit above me! I
> haven't changed anything specificaly, I am running Vista
> though....! So any help there would be appreciated?

There are two modes for uploading files: binary and ASCII. Binary should be used for media, such as images or sound files, which need to be transferred unchanged, byte for byte, but ASCII should be used when uploading code or text, since it takes into account the fact that different operating systems use different combinations of carriage return / line feed characters.

Your FTP software should have an option to switch between these, but it may also have an 'auto' mode, which, based on the file extension (.jpg, .php, etc), will switch to the correct mode on a file by file basis. It's possible, however, for it to get it wrong, if it doesn't recognise a specific extension.

As for the operating system, I'm running XP, but that shouldn't be a factor.

The directories and files on the Freeola servers have read / write / execute permissions for 'owner', 'group' and 'public' access. These need to be set correctly for certain scripts to work properly and can be altered using FTP software.

The permissions are often quoted in 3 digit shorthand. The recommended settings for files and directories on Freeola servers is 755.

The first digit represents 'owner' permissions, the second 'group' and the third 'public'. The digits represent a binary code where '4' grants 'read' access, '2' grants 'write' access, and '1' grants 'execute' access. By adding these together, you can get any combination of read / write / execute access.

So, 755 grants read / write / execute (4+2+1=7) access to the 'owner', read / execute (4+1=5) access to the 'group', and read / execute (4+1=5) access to the 'public'.

Your FTP software may display this as 'rwxr-xr-x', where 'r' is read, 'w' is write, 'x' is execute, and '-' means the missing permission, in this case 'w', is denied.


> I also get runtime errors in IE that say galleryarray is
> undefined, but the slideshow doesn't work in Firefox either (just
> on Apache!).

You can open the error console in Firefox with 'Tools / Error Console' [Ctrl+Shift+J], (or if you have the Web Developer add-on, by clicking on the exclamation mark within a red circle to the far right of the Web Developer toolbar). This may give you extra info.

I've played around with the permissions on the Freeola server for the 'photos' directory (with FireFTP - an FTP add-on for Firefox), and I can recreate the issue if I deny 'public' read access to the 'photos' directory (by setting its permissions to 750):

(IE)

'galleryarray' is undefined

(Firefox)

invalid label
Warning: opendir(photos): failed to open dir: Permission denied in /home/sites/.../images.php on line 7
galleryarray is not defined



If, instead, I rename 'photos' to 'photos2', I can also recreate the issue:

(IE)

'galleryarray' is undefined

(Firefox)

invalid label
Warning: opendir(photos): failed to open dir: No such file or directory in /home/sites/.../images.php on line 7
galleryarray is not defined


As you can see, IE doesn't distinguish between them, but Firefox does. So, have a look at the Firefox console and see what that says.

Thanks for the replies :)

I just changed dirname= "photos" and it still doesn't work!

All that is displayed is the first image (the path of which is hard-coded initially (before itterating though the array - randomly - from that position)).

The folder is named correctly and contains a reasonable amount of images (50ish I think) - it works ok on Apache and it's the same code/folders that I uploaded.

As for permissions and binary/ASCII...that's a bit above me! I haven't changed anything specificaly, I am running Vista though....! So any help there would be appreciated?

I also get runtime errors in IE that say galleryarray is undefined, but the slideshow doesn't work in Firefox either (just on Apache!).

(its a bit of a pain that my code will work for other people but not for me!!)

hiya, soz but i can't offer you any help with this prob but,
in the code you have typed

"/home/sites/vip******* /httpd/htdocs/photos")

i guess you typed the stars for a good reason so you may want to edit the discription of your prob which is above that code.

I ran your code on my VIP server with one modification:

function returnimages ($dirname= "photos") {...}

and the images rotated okay.

Are you just getting a single static image, or no image at all?


Here's a short check list:

1) Are your permissions set correctly?
2) Is your photos directory named 'photos' (not 'pics')?
3) Do you have more than one image in the photos directory?
4) Did you upload the images as binary rather than ASCII?

I am using PHP to read images from a file, and then Javascript and HTML to create a random slideshow. The problem is, the images rotate perfectly when running the script in Apache/XAMPP, but when I upload them to freeola and view my site, they do not rotate. I have emailed tech support, who think it should work. I have tried just "./pics" as the file path, and also "/home/sites/vip*******/httpd/htdocs/photos" in both the javascript and PHP. Here is the code I have adapted from whats already out there (which I'm sure will be useful to some!!) - it's in two seperate files...

Thanks in advance for any help...I should probably add I am a bit new to this!

<?
Header("content-type: application/x-javascript");
function returnimages ($dirname= "/home/sites/vip******* /httpd/htdocs/photos")
{
$pattern='(.jpg$)|(.png$)|(.jpeg$)|(.gif$)i';
$curimage = 0;
if ($handle = opendir($dirname))
{
while (false !== ($file = readdir($handle)))
{
if (eregi($pattern, $file))
{
echo 'galleryarray['.$curimage.']="'.$file .'";' . "n";
$curimage++;
}
}
closedir($handle);
}
}
echo 'var galleryarray=new Array();' . "n";
returnimages();
?>


<script src="images.php"></script>
<script language="javascript">
var randomImg=0;

function rotateimages()
{
randomImg = Math.floor(Math.random()*galleryarray.length-1);
document.getElementById ("slideshow").setAttribute("src", "photos/" +galleryarray[randomImg]);
}

window.onload=function()
{
setInterval("rotateimages()", 3000);
}
</script>