PHP Slideshow using a text based database

What is a slideshow?

At its most basic, it is a sequence of images. You can create this sequence in a number of ways.

Example of a basic simple sequence:
There is a starting page, a separate page for every slide in the show, and a finishing page to return the viewer to wherever you want them to go, usually the starting page.

I will be using a text file to save information about the images that will appear in the slideshow. I determine what information I am going to need when I display images in the slideshow and create a file (imagesdata.txt) using the following format:

#$imagepath, $imagewidth, $imageheight, $titletop, $titlebot, $credit
images/stitch.jpg*250*350*After landing on Earth*Stitch in his glory.*No one

The '*' is used a a separation delimeter. Each image in the slideshow will be on a separate line in the file and its information such as path, width, height etc. separated by the '*'.

The first line in the image data file does not have image data, so this line is ignored ewhen displaying images in the slideshow. This is done by initially setting the page number (the page number matches a line in your data file) to one, and the line count (the specific element of the array) to zero.

Note: You should remember that when the contents of a file are read into an array the first line of the file will be the first element of the array, but the number of the first element in the array will not be one, it will instead be zero.

When the line count equals the page number, the data on that line in the file is extracted from the array and used to display the image. The first line in the file will always be skipped by setting the page number to one or a higher values. The line count, initially set to zero, will not equal the page number and will increment until it does equal the page number:

The variables and programming logic used to skip first line in data file

// if the page number is not set, then set it to one
if(!isset($page)){ $page=1;}
 
$line_cnt=0; // first element in array
 
while ($imageinfo=fgets($fp2,1024)){
if ($line_cnt == $page){
$right_line = $imageinfo;
list($imagepath, $imagewidth, $imageheight, $titletop, $titlebot, $credit)= explode("*",$right_line);
break;
}
$line_cnt++;
}

If there is only one line in the image data file (remember the first line gives the format that image data should be recorded in, and the slideshow script will not expect to find data on this line) then the slideshow will print a message stating there are curently no images in the slideshow.

The variables and programming logic used to determine if there are images in the images datafile

// counts the total number of lines in the datafile, and subtracts one since the first line
// in the file will not contain image data
$count = count($filecnts)-1;
 
// if there is only one line in the image data file, then the value of count will be zero
// if count is less than or equal to zero there are no images in the slideshow
if ($count <= 0){
 
echo "There are currently no images in the slideshow. <br>Please edit the ".$file_name." file and add images to the slideshow.";
 
}

Creating links for the Next/Prev image

An explanation of how to create page by page navigation for the slideshow.

Each line in the datafile will correspond to a page in the slideshow, therefore to know the total number of pages in the slideshow count the total number of lines in the datafile. Once the total is known we can use it to create links to the next and previous images in the slideshow.

The variables and programming logic used to create the next/prev navigation

// read the contents of your datafile into an array, each line is one element of the array
$filecnts = file($file_name);
 
// counts the total number of lines in the datafile, and subtracts one since the first line
// in the file will not contain image data
$count = count($filecnts)-1;
 
$rows=1; // how many results to show
 
if ((!$offset) ¦¦ ($offset < 1)){ // if page offset not set or less than one, set to one
$offset=1;
}
 
$nextoffset=$offset+$rows; // calculates the number of the next page
$prevoffset=$offset-$rows; // calculates the number of the previous page
 
/* create the navigation of next and previous links the first page will be one and the last page will be the value of $count
*/
 
// if there is only one image do not print a next link
if (($count < $nextoffset) && ($prevoffset < 1)):
 
// if there is more than one image print a next link on the first page
elseif ($prevoffset < 1):
$navigation .= "<p><a href=\"$PHP_SELF?page=$nextoffset&offset=$nextoffset&stoprefresh=$stoprefresh\">next </a>";
 
// if there are no more images print the previous link on the last page
elseif ($count < $nextoffset):
$navigation .= "<p><a href=\"$PHP_SELF?page=$prevoffset&offset=$prevoffset&stoprefresh=$stoprefresh\">prev </a>";
 
// for all pages that are not the first or last page, print a next and previous link
else:
$navigation .= "<p><a href=\"$PHP_SELF?page=$prevoffset&offset=$prevoffset&stoprefresh=$stoprefresh\">prev ¦ </a>
<a href=\"$PHP_SELF?page=$nextoffset&offset=$nextoffset&stoprefresh=$stoprefresh\">next</a>";
 
endif;
 
print ($navigation);

Displaying the images

I am using the meta refresh tags to cause the browser to open/reload a new page, after a specified amount of time has passed. The pages loaded by the browser will change automatically, displaying a different photo or image on each page.

The meta refresh tag:

The meta tag usually found within the of your HTML document. When used to refresh the current page, the syntax looks like this:

http-equiv="refresh"
This attribute tells the browser that this meta tag is sending an HTTP command rather than a standard meta tag. Refresh is an actual HTTP header used by the Web server. It tells the server that the page is going to be reloaded or sent somewhere else.

content="5"
This is the amount of time, in seconds, until the browser should reload the current page.

URL="page.html"
The URL that should be loaded. It is separated from the time by a semi-colon (;).

Note: It is best to not use the META refresh attribute on pages you want indexed by search engines, but if you do, set it to at least 10 seconds.

The slideshow will continue to refresh until it is stopped.

Programming logic to turn on/off automatic refresh

f($stoprefresh !=1){
// automatically refresh page x number of seconds when $stoprefresh is false (0) by printing a meta refresh tag
 
if($page !=$count){ // as long as the last page in the slideshow is not reached, go to the next page
echo "<meta http-equiv=refresh content=\"5;URL=$PHP_SELF?page=".$nextoffset."&offset=".$nextoffset.
"&stoprefresh=".$stoprefresh."\">";
}else{ // if the last page is reached go back to the first page
echo "<meta http-equiv=refresh content=\"5;URL=$PHP_SELF?page=1&offset=1&stoprefresh=".$stoprefresh."\">";
}
 
}

As I am viewing images in the slideshow I can stop it from automatically refreshing by clicking on a link
that will set the stoprefresh variable to true. When this variable is true, the meta refresh tag is
not printed.

<a class="link" href="<? echo "$PHP_SELF?page=".$page."&offset=".$page."&stoprefresh=1"; ?>">Stop
auto refresh</a>
¦¦
<a class="link" href="<? echo "$PHP_SELF?page=".$page."&offset=".$page."&stoprefresh=0"; ?>">Start
auto refresh</a>

Once I have extracted the information for an image from the datafile, it is assigned to variables (via the list() function) that I will use to display the image:

list($imagepath, $imagewidth, $imageheight, $titletop, $titlebot, $credit)= explode("*",$right_line);

I am using a simple table format to display the image:

<table border="0" valign="top" cellspacing="10">
<tr><td valign="top" colspan="5">
Slideshow: Random Images
<p>
 
<? echo $titletop; ?>
<p>
 
<img src="<? echo $imagepath; ?>" width="<? echo $imagewidth ?>" height="<? echo $imageheight ?>"><br>
 
<? echo $titlebot; ?>
<p>
 
Photo credit: <? echo $credit; ?> .
<p>

If the variables have a value it will be echoed. If there is no value then nothing will be echoed i.e.

#$imagepath, $imagewidth, $imageheight, $titletop, $titlebot, $credit
images/ABSTRACT.jpeg*374*374*ABSTRACT.**No one

There will not be a title at the bottom of this image, because there is no value specified for it in the datafile.

See it in action. ¦ Get complete code ¦ View data file