Loading...

Image slideshow

nathanael
in
PHP

Image SlideshowThis is an updated version of the old slide show tutorial. Lets start off with the two files used for this. Feel free to download the completed slideshow with images here.

first the Config.php

<?
$total = 4; //Total number of images in slideshow
$var_total = 5; //Total number of images + 1

$arr_img = array('', //empy array image set for [0]
'Stellar.jpg', //Image names to be displayed in the slideshow
'Submerged.jpg',
'b_luecrab.jpg',
'darkness.jpg');

//Puts All Files In A Given Directory Into An Array
//If You Plan To Use This, Delete The Code For The Array Given Above
//$arr_img = Array();
//$handle = opendir('./img dir/');
//while (false !== ($file = readdir($handle))) {
// if ($file != "." & & $file != "..") {
// $arr_img[] = $file;
// }
//}

//No Need to edit below here
$i = 1;
$next = 2;
$back = 0;
while($i <= $total){
if($back == 0) {
$back_link = $total;
} else {
$back_link = $back;
}
if($next == $var_total) {
$next_link = 1;
} else {
$next_link = $next;
}
if ($image == "$i") {
$next_img = "$next_link";
$back_img = "$back_link";
}
$i++;
$next++;
$back++;
}?>

Now for the slides page.

<?
require_once "config.php";
if($_REQUEST[auto] == "on") {
$meta = "<meta http-equiv="refresh" content="2;url=$PHP_SELF?image=$next_img&auto=on" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />";
$nav = "<a href="/img_articles/12068/$PHP_SELF?image=$back_img&auto=on">Back</a> |
<a href="/img_articles/12068/$PHP_SELF?image=$image&auto=off">Stop Slideshow</a> |
<a href="/img_articles/12068/$PHP_SELF?image=$next_img&auto=on">Next</a>";
}
if($_REQUEST[auto] == "off" || !$_REQUEST[auto]) {
$meta = " <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />";
$nav = "<a href="/img_articles/12068/$PHP_SELF?image=$back_img&auto=off">Back</a> |
<a href="/img_articles/12068/$PHP_SELF?image=$image&auto=on">Start Slideshow</a> |
<a href="/img_articles/12068/$PHP_SELF?image=$next_img&auto=off">Next</a>";
}
echo<<<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>
<head>
<title>Page Title</title>
$meta
</head>
<body>
EOF;
if(!$_REQUEST[image]) { //Default thumbnil page
$i = 0;
foreach($arr_img as $var_img) { //Grabs all the image names in th array
if($var_img != "") { //Dont show first entery of the array that is blank
echo<<<EOF
<a href="/img_articles/12068/$PHP_SELF?image=$i"><img src="./thumbs/$var_img" /></a>
EOF;
}
$i++;
}
} else { //Show the slides
echo<<<EOF
<div align="center">
<img src="./slides/$arr_img[$image]" /><br /><br />
$nav
</div>
EOF;
}
?>

Theres really not too much to this that needs to be changed for it work for you. Lets have a quick break down of the code:

$total = 4; //Total number of images in slideshow
$var_total = 5; //Total number of images + 1

All you need to change are these two lines, set $total to the total number of images you want to apear in the slideshow.

Next set $var_total to the total number + 1.

The reason we do this is because the images are stored in an array. The first index of an array is always [0]. This is the number we use to pass which image to show in the slideshow when a thumbnail is clicked. The problem is, you cant pass a value of 0 in PHP. Therefor we set the first index to a blank value (which you will see shortly). Because of this blank value, there is one more array index than there is image, which is why we set $var_total to the number of images + 1.

$arr_img = array('', //empy array image set for [0]
'Stellar.jpg', //Image names to be displayed in the slideshow
'Submerged.jpg',
'b_luecrab.jpg',
'darkness.jpg');

This is the array that stores the images to use in the slideshow. If you notice the first value of the array is ''; which is nothing. This is what I just explained about the blank array index.

All you need to do now is change the names of the images to the images you wish to use.

Now say you have a nice amount of images and you dont want to list them all. All you need to do is replace the above code with:

$arr_img = Array();
$handle = opendir('./img dir/'); //change to your image directory
while (false !== ($file = readdir($handle))) {
if ($file != "." & & $file != "..") {
$arr_img[] = $file;
}
}

This will take all the files from the given directory and store them in an array, making for life much easier.

Now for the page that displays the images.

if($_REQUEST[auto] == "on") {
$meta = "<meta http-equiv="refresh" content="2;url=$PHP_SELF?image=$next_img&auto=on" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />";
$nav = "<a href="/img_articles/12068/$PHP_SELF?image=$back_img&auto=on">Back</a> |
<a href="/img_articles/12068/$PHP_SELF?image=$image&auto=off">Stop Slideshow</a> |
<a href="/img_articles/12068/$PHP_SELF?image=$next_img&auto=on">Next</a>";
}
if($_REQUEST[auto] == "off" || !$_REQUEST[auto]) {
$meta = " <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />";
$nav = "<a href="/img_articles/12068/$PHP_SELF?image=$back_img&auto=off">Back</a> |
<a href="/img_articles/12068/$PHP_SELF?image=$image&auto=on">Start Slideshow</a> |
<a href="/img_articles/12068/$PHP_SELF?image=$next_img&auto=off">Next</a>";
}

This make the links for the slideshow, and the start/stop button. If the slidehsow is active, the link will stop the slideshow, and vise versa.

if(!$_REQUEST[image]) { //Default thumbnil page
$i = 0;
foreach($arr_img as $var_img) { //Grabs all the image names in th array
if($var_img != "") { //Dont show first entery of the array that is blank
echo<<<EOF
<a href="/img_articles/12068/$PHP_SELF?image=$i"><img src="./thumbs/$var_img" /></a>
EOF;
}
$i++;
}

This is the code that will display the thumbnails.

if(!$_REQUEST[image])

says if image is not geting requested, do the following (which displays the thumbs)

$i = 0;
foreach($arr_img as $var_img) { //Grabs all the image names in th array
if($var_img != "") { //Dont show first entery of the array that is blank
echo<<<EOF
<a href="/img_articles/12068/$PHP_SELF?image=$i"><img src="./thumbs/$var_img" /></a>
EOF;
}
$i++;

This first sets $i to 0, then goes through each image in the array and displays the thumbnail as a link to the slideshow image.

if($var_img != "") {

This says, is the value is not blank show it. If this is not used, the first image would be nothing because the first value of the array is blank.

If you look at the link you'll see:

?image=$i

This sets the image value to a number. The first image would be set to 1, the second to 2, and so on. This is how the image name is pulled from the array.

}else { //Show the slides
echo<<<EOF
<div align="center">
<img src="./slides/$arr_img[$image]" /><br /><br />
$nav
</div>
EOF;
}

This code is used to show the slideshow image.

if you look in the img src, you see we are using $arr_img[$image] in place of a name. Heres why:

A user clicks a thumbnail with image=1, image=1 is passed through the url ie, slides.php?image=1 on the slides page $arr_img[$image] is changed to $arr_img[1] the config files changes $arr_img[1] to Stellar.jpg (which is the first image name in the array. $arr_img[2] would = Submerged.jpg and so on) All this make the img src the same as <img src="./slides/Stellar.jpg">

Thats pretty much it. The is very little needed to change in order to make this work for you, feel free to download the completed slideshow with images here.

Copyright © . All Rights Reserved