You have created a CSS photograph gallery for your web page. The gallery only has space for a small number of pictures but your album contains hundreds of pictures, all of which you want to keep. The answer would be to keep all the pictures and then have the webpage display a random selection of the images each time the page is loaded. This little PHP script will not only do exactly that but can also be used in conjunction with a lightbox script
Acknowledgements
Please note: I do not claim this to be my own work.
The core of the script is based on the work of Jean-Baptiste Jung and the help of Scott, webmaster of the webhelpforum.co.uk.
The PHP Script
The PHP script is made up of two parts, the array and in-page call. The in-page call (which is placed in the actual gallery) pulls a set of images from the array which is stored in an second PHP file.
Array
<?php
$thumbs = array(
array(
"title"=>"info", //Title for the link tooltip
"img" =>"thumbail/thumb1.jpg", //Source URL to Image thumbnail
"url" =>"slide/slide1.jpg", //URL to Larger Image
"alt" =>"description", //Alt Description for image
),
array(
"title"=>"info", //Title for the link tooltip
"img" =>"thumbail/thumb2.jpg", //Source URL to Image thumbnail
"url" =>"slide/slide2.jpg", //URL to Larger Image
"alt" =>"description", //Alt Description for image
)
);
?>Note that there is no "," after the last closing array ")".
Save this file as thumbs.php
In-page call
Place this script in the gallery, where you want the images to appear.
<?php
include_once("thumbs.php");
shuffle($thumbs);
$thumbs =
array($thumbs[0],$thumbs[1],$thumbs[2],$thumbs[3],$thumbs[4],$thumbs[5],$thumbs[6],$thumbs[7]);
foreach($thumbs as $thumb){
?>
<a href="<?=$thumb["url"]?>" rel="shadowbox[gallery]" title="<?=$thumb["title"]?>"><img src="<?=$thumb["img"]?>" alt="<?=$thumb["alt"]?>" /></a>
<?php
}
?>If width and height is not defined in CSS use:
<img src="<?=$thumb["img"]?>" alt="<?=$thumb["alt"]?>" width="210" height="97" />Notes:
- Refreshing the page will display new images and links
- Links and images are set in the thumbs file
- Works with lightbox and shadowbox
What it looks like
On page load:
After page refresh
0 comments: