Site map

 

• CSS Photo Gallery
• CSS Gradients
• CSS
  Menus
• CSS Image Rollovers
• Javascript Tooltips

Dynamic php driven CSS photo gallery

• CSS Photo Gallery
• Rotating
  php gallery
• HTML Template
• XHTML Template
• CSS Explained
• The
  CSS file

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

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

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.

Copyright © 2004 - Tanked Up Underwater Imaging