Displaying random images

PHP
1

Have been advised elsewhere here, that perhaps PHP can solve this ? Have researched into displaying random images, but can’t seem to find the solution looking for this one. 30 images in total, the locations for them, divided up into 3 folders, 10 in each. On every page load, 10 from one folder would appear randomised in any order in a vertical block, then on page refresh/load, 10 from the next folder would appear in the same randomized way, then on page refresh/load, and so on, and so on.

Some of the images would hyperlink elsewhere.

Is this possible without any javascript please ? The images can all go in one folder if that helps.

Any help much appreciated.

Dez

2

You’ll have to use JavaScript to do that I’m afraid. PHP is a server side language so will only run on the server. That means it can only be used to affect changes before the pages are sent to the site visitor.

Once the page is displayed in the browser you’ll need to use JavaScript to manipulate it.

3

Many, many thanks Jaanboy and GreenMedia, it’s a great help. Is there any way of tweaking the code at all, so that one vertical array of images appeared for 30 seconds and then the other vertical array of images appeared for 30 seconds and so on. BUT, still nothing to do with javascript ?

4

Many thanks for that, I think I understand, except, where does the code below go please :

$allimages = array(0=>$folder1,1=>$folder2);

Also, how do you sort and loop ?

5

First of all, you can place the following code at the top of the file that you want to display the images on (hopefully you can see the pattern to follow to add more images):

<?php

$images = array(
	0 => array(
		0 => array(
			'file' => 'path/to/image.jpg',
			'link' => 'http://somesite.com'
		),
		1 => array(
			'file' => 'path/to/image2.jpg',
			'link' => 'http://someothersite.com'
		),
	),
	1 => array(
		0 => array(
			'file' => 'path/to/image3.jpg',
			'link' => 'http://somesite.com'
		),
	),
	2 => array(
		0 => array(
			'file' => 'path/to/image4.jpg',
			'link' => 'http://somesite.com'
		),
	)
);

$folder = $images[mt_rand(0, 2)];
shuffle($folder);

?>

Then, where you want to display the images, use:

<?php

foreach ($folder as $image)
{
	echo '<a href="' . $image['link'] . '"><img src="' . $image['file'] . '" border="0" /></a><br />';
}

?>

Remember to save the file with a .php (not .html or .htm) extension.

6

Well, despite some of the very helpful replies here, it looks as though I can’t achieve the exact requirements above, without any javascript - unless any of you knows differently ?

7

Also, I was trying to do it without js, because of the minority that have js disabled

I am part of that minority, and one of the reasons I have it disabled is to stop unwanted unnecessary animations. Let those who like fancy junk get the fancy junk. Just give the rest of us content.

8

I personally don’t work for those browsers having the JavaScript disabled. :slight_smile:

9

Don’t know . . . just weighing up the various options.

10

You can achieve those exact requirements with PHP (or whatever backend language) alone… what you cannot do without Javascript is your later request that these images change every 30 seconds.

On page load or page refresh? Yes, you can with (just) PHP.

Every 30 seconds regardless of page refresh or load? No, unless you set up a server-side or meta refresh, both of which of course resets all form elements on a page and brings linear user agents back to char 1, line 1 (so a screen reader set to automatically start reading the page starts right back at the top and repeats itself again… or, someone who had scrolled down to near the bottom of the page finds themselves back at the top). Well, unless you also use something like a session that can keep any changes on the pag e and also keep the user at the original place.
So to prevent refreshes while maintaining the requirement of “images change every 30 seconds”, Javascript or Flash would be necessary.

Again, if front-end scripting is used, these images do NOT have to be taken from the server every time, regardless of what folder they’re in, unless these are being newly created/generated or called from some other server somewhere else?

11

I know that… but still I want them to take the advantage of JavaScript and AJAX to make the accessing the page more user friendly.

So you are going to refresh the page each time to display the random images?

12

1% = quite a few million people :slight_smile:

13

Thanks Greenmedia, it’s appreciated. How about AJAX ?

14

Many thanks, the browser should be OK now, it was waiting to display a thumbnail for the validation. I have copied the thumbnail onto my site.

The images was from:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fjohns-jokes.com%2Fdownloads%2Fsp%2Fdez%2F

.

15

Great demo, John (as far as it showing exactly what Dez originally asked for). Though my browser sits a long time waiting for something… I assume it’s the images still loading or something?

16

The number of people without JavaScript is closer to 10% and a significant number of those are using web readers that don’t even support JavaScript or have JavaScript turned off completely because they have had enough of the stupid things some people try to force on everyone by using it. JavaScript should never be used for anything your page needs to have work unless you provide an alternative for those without it.

With JavaScript there is no reason for using Ajax to change images at regular intervals since JavaScript can download new images directly whenever you need them without needing anything else. Just create a new Image(); and then supply a .src value identifying the image to download.

17

If there are no many images (not more than 100) to randomise, it is pretty handy to work with only JavaScript (not even AJAX). Just load them in the JavaScript array and then access the variable with some interval window.setTimeout().

18

Agreed, if you want images changing every 30 seconds, you have only I think 3 options:

  • flash
  • javascript/ajax (ajax is just javascript talking to the server)
  • forced refreshed (annoying as hell, terribly for accessibility… look, facebook does it if you don’t have Javascript enabled, which is why Facebook sucks balls horribly)

Since option 3 is out (unless you hate your visitors) the other two are your good options. You don’t necessarily need Javascript to keep talking to the server though: You can just tell Javascript to call all the images in one go and then randomise. Preloading and having some default/hardcoded images for first onload would be smart (don’t ask me how to do that, ask the Javascript gurus).

Flash can basically do the same thing, using Actionscript.

If you do not want front-end coding like Javascript involved, then you’re only going to get server-side refreshes when the client asks. So no every-30-seconds stuff.

19

There’s 12 images in each array, each array appearing for 15 seconds, and when the images in each array appears, they are randomised. Also, I was trying to do it without js, because of the minority that have js disabled

20

How are you storing the references to the images? If they are stored in a database use could use a SQL Order By Rand() statement. You’d need to add an appropriate WHERE clause to select the images from one folder though.

If the references are hard coded in to the page you could use the PHP Rand() statement possibly coupled with shuffel(). Something like the following (untested)


$allimages = array(0=array(0='images1/img1.jpg),
			  1='images1/img2.jpg),
			  ),
			 1=array(0='images2/img1.jpg),
			            1='images2/img2.jpg),
			  ),
			  2=array(0='images3/img1.jpg),
				  1='images3/img2.jpg),
			  )			  
		);
	$imageselection = $allimages(rand(0,2)) ;
	shuffle($imageselection);

You can then loop through $imageselection to output your images.