How to display a photo collection in PHP

By Sergey Skudaev

++++

This PHP code example will show you How to display a photo collection on your web site, using just two PHP pages. The complete PHP code and HTML for these two pages is shown below.

The first page displays thumbnail images of all pictures. When user clicks on a thumbnail image, the second page with the large version of picture displays. When user clicks "Next" button or link, the next large picture displays. This way you can display 35 - 40 pictures on one page. You can see it on my web site:

www.serge-world.com/winter.php

emulator

First I rename all pictures so that file name has underline character and number at the end, for example, winter_1.jpg, winter_2.jpg and so on.

To save space, I usually create small images 120x120 pixels for thumbnails. I do it by creating html page (for example, winter.html) with a table and displaying all pictures in table cells on one page. I use TextPad as editor. I never use MS FrontPage, Dreamwaiver etc.

So, I open my winter.html in browser. Then, I press Print Screen button and paste screen shot in MS Paint. From MS Paint, I clip each small image and paste it in MS WORD. Then I save word document as Web Page Doc1.htm. All small images are converted in .jpg and .png format and are saved in Doc1_files folder. (If you use MS Word 2003 Doc1_files folder is not created, so use older version).

I copy jpg thumbnails images in winter folder and rename them in the same way, for example, winterh_1.jpg, winterh_2.jpg and so on. "h" stands for thumbnail. Then I modify winter.html page by adding links from each thumbnail to the second page passing thumbnail file name. On the second page display_winter.php I extract number from image file name, increase it by one and place in the link to the same page passing image file name with increased number. As a result each time the display_winter.php page will be loaded with the next image. Look at the PHP source code and you will understand it.

winter.html file code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>the eastern siberia: winter</title>
<meta name="title" content="the eastern siberia: winter">
<meta name="description" content="the eastern siberia: winter">
<meta name="keywords" content="eastern siberia, winter, photo, photos">
<meta name="owner" content="serge skudaev">
<meta name="author" content="sergey skudaev">
<meta http-equiv="content-language" content="eng-us">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="2 weeks">
<!-- end of meta tags -->
<link rel="stylesheet" href="firestyle.css">
</head>

<body>
<div id="page">

<h1 align="center">The Eastern Siberia: Winter</h1>
<h2 align="center"></h2>
<table align="center"
<tr>
<td><a href="display_winter.php?imagefile=winter/winter_1.jpg"><img src="winter/winter_1.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_2.jpg"><img src="winter/winter_2.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_3.jpg"><img src="winter/winter_3.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_4.jpg"><img src="winter/winter_4.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_5.jpg"><img src="winter/winter_5.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>

</tr><tr>
<td><a href="display_winter.php?imagefile=winter/winter_6.jpg"><img src="winter/winter_6.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_7.jpg"><img src="winter/winter_7.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_8.jpg"><img src="winter/winter_8.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_9.jpg"><img src="winter/winter_9.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_10.jpg"><img src="winter/winter_10.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>

</tr><tr>
<td><a href="display_winter.php?imagefile=winter/winter_11.jpg"><img src="winter/winter_11.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_12.jpg"><img src="winter/winter_12.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_13.jpg"><img src="winter/winter_13.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_14.jpg"><img src="winter/winter_14.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_15.jpg"><img src="winter/winter_15.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
</tr><tr>
<td><a href="display_winter.php?imagefile=winter/winter_16.jpg"><img src="winter/winter_16.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_17.jpg"><img src="winter/winter_17.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_18.jpg"><img src="winter/winter_18.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_19.jpg"><img src="winter/winter_19.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_20.jpg"><img src="winter/winter_20.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>

</tr>
<tr>
<td><a href="display_winter.php?imagefile=winter/winter_21.jpg"><img src="winter/winter_21.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_22.jpg"><img src="winter/winter_22.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_23.jpg"><img src="winter/winter_23.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_24.jpg"><img src="winter/winter_24.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_25.jpg"><img src="winter/winter_25.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>

</tr>
<tr>
<td><a href="display_winter.php?imagefile=winter/winter_26.jpg"><img src="winter/winter_26.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_27.jpg"><img src="winter/winter_27.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_28.jpg"><img src="winter/winter_28.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_29.jpg"><img src="winter/winter_29.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>
<td><a href="display_winter.php?imagefile=winter/winter_30.jpg"><img src="winter/winter_30.jpg" width="120" alt="Eastern Siberia" border="0"></a></td>

</tr>
</table>
</div>
</body>
</html>

display_winter.php file code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<?php

import_request_variables("pgc","");

?>
<html>
<head>
<title>the eastern siberia: winter</title>
<meta name="title" content="the eastern siberia: winter">
<meta name="description" content="the eastern siberia: winter">
<meta name="keywords" content="eastern siberia, winter, photo, photos">
<meta name="owner" content="serge skudaev">
<meta name="author" content="sergey skudaev">
<meta http-equiv="content-language" content="eng-us">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="2 weeks">
<!-- end of meta tags -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page">
<?php

//Find length of image path and file name

$len=strlen($imagefile);

//Find position of underline character

$pos=strpos($imagefile,"_");

//Find dot position

$dotpos=strpos($imagefile,".");

//Obtain string that includes path + file without dot and extention

$pathwithoutdot=substr($imagefile,0,$dotpos);

//Obtain string that includes path + file without underline character

$pathtounderline=substr($imagefile,0,$pos+1);

//echo "<br>pathtounderline:".$pathtounderline;

//echo "<br>pathwithoutdot:".$pathwithoutdot;

//Obtain number at the end of image file between underline character and dot character. "image_1.jpg"

$number=substr($imagefile, $pos+1, ($dotpos-$pos));

//if number is less than number of pictures increase it by 1 each time page is loaded

if($number <30)
$number=$number+1;
else
$number=1;

print('<br><table width="90%"><tr><td>');
print('<img src="'.$imagefile.'" width="500" alt="Eastern Siberia">');
print('</td></tr></table>');
print("<h1 align="center">Eastern Siberia</h1>");
print('<h2 align="center">Photos</h2>');

// assemple img path from path and name including underline character + new number + ".jpg"
// Next image will be displayed
print('<p><a href="display_winter.php?imagefile='.$pathtounderline.$number.'.jpg">Next</a></p>');
?>
</body></html>

Did you find information useful? Send to your friend a link to this page

Please rate the tutorial

1 2 3 4 5 6 7 8 9 10



Comments
Register to add comments ( 5000 chars ) for image_collection.php.
Are you human? Please select two the same numbers