Site map

spacer

Dynamic php driven CSS photo gallery

spacer

12 images changing by the hour

 

12 image rotation gallery

The css photo gallery above is a version of the original css photo gallery. This version though uses php to load six different images (a new image every 4 hours) for each position ie. 6 images×12 positions = 72 images.

You can of course have as many photos as you are willing to code in. If you want a different image every hour you will need to upload 24 images×12 positions = 288 images!

Clever innit?

Well of course you're looking at this thinking what's the big deal? I guess the only way you can see this work is to memorise, bookmark and come back in four hours to see the pics change smile

One day I'll suss out a way of doing this, so it changes every time you refresh. I think it's clever enough as is to be honest. I know it's possible, but for now just have some patience and come back later smile

The php code for a new image every 4 hours

The code for one position is shown below, you would then have to repeat this (with image id's changed) another twelve times for the full gallery.


The normal HTML markup from the CSS photo gallery

<div class="thumb">

	<a href="image01.html">

	<img src="images/image01_thumb.gif" alt="Image01">

		<span>
			<img src="images/pre_image01.gif" alt="Image01">
			<em>Image01</em>
		</span>

	</a>

</div>


The php equivilent for the above

<div class="thumb">

	<a href="image01.html">

 	<?php
	$date = getdate();
	$hour = $date['hours'];
	if ($hour >= 0 && $hour < 4) {$pic='images/image01_thumb';}
	if ($hour >= 4 && $hour < 8) {$pic='images/image02_thumb';}
	if ($hour >= 8 && $hour < 12) {$pic='images/image03_thumb';}
	if ($hour >= 12 && $hour < 16) {$pic='images/image04_thumb';}
	if ($hour >= 16 && $hour < 20) {$pic='images/image05_thumb';}
	if ($hour >= 20 || $hour < 0) {$pic='images/image06_thumb';}
	echo '<img src="'.$pic.'.gif" alt="'.$pic.'">';
	?>

		<span>

			<?php
			$date = getdate();
			$hour = $date['hours'];
			if ($hour >= 0 && $hour < 4) {$prv='images/pre_image01';}
			if ($hour >= 4 && $hour < 8) {$prv='images/pre_image02';}
			if ($hour >= 8 && $hour < 12) {$prv='images/pre_image03';}
			if ($hour >= 12 && $hour < 16) {$prv='images/pre_image04';}
			if ($hour >= 16 && $hour < 20) {$prv='images/pre_image05';}
			if ($hour >= 20 || $hour < 0) {$prv='images/pre_image06';}
			echo '<img src="'.$prv.'.gif" alt="'.$prv.'">';
			?>

			<em>
				<?php
				$date = getdate();
				$hour = $date['hours'];
				if ($hour >= 0 && $hour < 4) {$txt='image01';}
				if ($hour >= 4 && $hour < 8) {$txt='image02';}
				if ($hour >= 8 && $hour < 12) {$txt='image03';}
				if ($hour >= 12 && $hour < 16) {$txt='image04';}
				if ($hour >= 16 && $hour < 20) {$txt='image05';}
				if ($hour >= 20 || $hour < 0) {$txt='image06';}
				echo $txt;
				?>

			</em>

		</span>

	</a>

</div>

The image positions v time (hrs) used above, is shown in the table below.

  • Image position
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 0hrs to 4hrs
  • 01
  • 07
  • 13
  • 19
  • 23
  • 05
  • 11
  • 17
  • 21
  • 03
  • 09
  • 15
  • 4hrs to 8hrs
  • 02
  • 08
  • 14
  • 20
  • 24
  • 06
  • 12
  • 18
  • 22
  • 04
  • 10
  • 16
  • 8hrs to 12hrs
  • 03
  • 09
  • 15
  • 21
  • 01
  • 07
  • 13
  • 19
  • 23
  • 05
  • 11
  • 17
  • 12hrs to 16hrs
  • 04
  • 10
  • 16
  • 22
  • 02
  • 08
  • 14
  • 20
  • 24
  • 06
  • 12
  • 18
  • 16hrs to 20hrs
  • 05
  • 11
  • 17
  • 23
  • 03
  • 09
  • 15
  • 21
  • 01
  • 07
  • 13
  • 19
  • 20hrs to 0hrs
  • 06
  • 12
  • 18
  • 24
  • 04
  • 10
  • 16
  • 22
  • 02
  • 08
  • 14
  • 20