So why might anyone want to learn to make a PHP photo gallery when there are plenty of freebies out there and in control panels of websites? Because learning is fun, and you might try using this as a stepping stone for writing your own PHP gallery script. And if you don't want to learn PHP, we have a JavaScript photo gallery that we teach you about. These scripts are fun to tinker with, modify, and learn from.

There are scripts that use methods like caching, file_get_contents, php_sapi_name, apache_request_headers, timestamps, blob fields, fopen(), fclose(), fgets(), fwrite(), file(), etc., for managing photos, but this is not such a script. Our host is really fussy about allowing this stuff so we settled for creating writing, reading, and editing scripts that simply keep all the photo names and category names organized in a MySQL database, rather than trying to actually store the pictures on the server in a db as data. Let's face it, the MySQL blob storage way is less safe, slower to use than just simply displaying images in browsers in Web pages, as well as being a bigger hassle to program. And by default, PHP does not allow uploading files larger than 2Mb, without messing with directives which our host would not allow. (Can you say "security risk"?) Our way, on this page, will allow images larger than 2Mb, and loading images into online folders is easier than blob storage. In either case, the images are on the server. But in one case there are restrictions, dangers, and hassles. And delays. Not with our way. And our way has a cool thumbnail display routine where you need not click on a thumbnail image to get a bigger image—hovering does the job. If you prefer clicking, dump the mouse coordinate reading and just install onclick events on each thumbnail.

See photo-gallery.html to see how it works (it's a JavaScript simulation). Once you get used to the unique display method, you'll see just how convenient it is. The actual photos and folders are up to you to deal with. Here's what you do when you use the script. Get a bunch of photos of one category and stick them inside a subfolder with that category name in a folder called "images", and do the same for other categories—their subfolders all go in the images folder, so the path is images/yourcategory/yourpicture.jpg. This images folder must be in the same folder as the script. Then when you want to create a gallery, simply go to code-for-creating-php-photo-gallery.html and copy the code and name it cms-write-photo-gallery.php, make a config.php file, upload these and the script on this page which you'll name cms-view-photo-gallery.php and the images folder to the Web, run the cms-write-photo-gallery.php script, enter all your categories as a comma-separated string and submit it. The script then asks for all the pictures in one category (you select the category from a dropdown list—they're the ones you just entered), and this is asked for as a comma-separated string again. Then submit it, and do this for the rest of the categories too.

This assumes you have a MySQL database you can use and permissions and you know the connection data and it's in a config.php file you've edited with your own data, and that you have copied the navi.html file below and uploaded it. (Do not add anything to this HTML file—it's an include file that does NOT need anything else!) Read the names in it and see the tutorial files on each of these—make sure you grab the code from each of these and name them the name in the navi.html file below and save and upload all of them.

Or download the files: cms-photo-gallery.zip

<div style='position:absolute;top:390px;left:2px;width:120px;background-color:#bbb;border:1px solid blue;padding:5px'>
<a HREF="cms-view-photo-gallery.php">View Gallery</a><br>
<a HREF="cms-edit-photo-gallery-add-photo.php">Add Photo</a><br>
<a HREF="cms-edit-photo-gallery-add-category.php">Add Category</a><br>
<a HREF="cms-edit-photo-gallery-delete-photo.php">Delete Photo</a><br>
<a HREF="cms-edit-photo-gallery-delete-category.php">Delete Category</a><br>
<a HREF="cms-write-photo-gallery.php">Create Gallery</a><br>
<a HREF="http://css-resources.com">CSS-Resources</a>
</div>

Here are the tutorial files for the above:
View Gallery
Create Gallery
Add Category
Delete Category
Add Photo
Delete Photo

A hint about creating a list of comma-separated photos or categories. We use Directory Lister to get file lists that can be saved as text files, and Editor2 (which can be gotten at that link) to manipulate the text. Get all the "image" files in a column in Editor2. Use the Replace function to delete all spaces in your list, and if any names have spaces they should be edited by using hyphens instead. Use the Replace function again to replace end of line ($0D) with comma. Select this comma-separated string for use with the script on the code-for-creating-php-photo-gallery.html page that you save as cms-write-photo-gallery.php. By using the above methods, we avoided having to type any file names, and if you have lots of photos (we had 179) this is important.

For adding photos, save the code on the code-for-adding-php-photo-gallery-photo.html page as cms-edit-photo-gallery-add-photo.php, upload it, and add one at a time after copying the names from your file manager, and select the category it goes in from a dropdown. There are scripts for deleting photos, deleting categories, adding new categories, adding photos, creating the gallery, and viewing the gallery (this page's script), as you can see.

So, on to the code. We define the CSS, then run browser sniffers and finetune the display with the fixem() function, run by the onload in the body tag. Next, there's the fix() and unfix() functions. The former moves the popup div from CSS left
-1777px to 125px. The popup div shows whenever your cursor is on top of a thumbnail photo. Not only the left CSS property needs adjusting—the top CSS property does too. This is because when the page is scrolled, the needed top coordinate changes. The top() function figures out how much the page is scrolled and this is added to the normal unscrolled number (50px, the nicest looking place for the popup). All this happens for the text label as well. The label div gets, via innerHTML, p[s] as its label. Obviously, the p[] array contains the names of the pictures in the currently displayed category. This would only be an image name, but the PHP code adds image/thecategory/ to the front of the image name so that the path actually loads the picture when needed. The only difference between the thumbnail and the popup is that the thumbnail is 152px wide with a 10px margin around it and the popup is 744px wide. The popup div name is "over" which explains the over.src=p[n] code in fix(). The unfix() function moves the popup and its label back to -1777px, out of sight.

The startmouse() function is run from a body tag onload—it gets the mouse coordinate checker started. Note that IE and Firefox have different ideas about using the onMouseMove event. A comment shows where the thumbnails are located on the page, and this helps to clarify the coordinate parameter checking done in the getCoords() function. Next is the top() function (that gets either the IE or the Firefox/Netscape version of the current page's vertical scroll position). The getCoords() function not only gets the mouse position, it compares it to all the thumbnails on the page. The fix() function is run if the mouse cursor is on a thumbnail and the unfix() function is run if it's between pictures. For more details on this function, see JavaScript photo gallery. The gallery is set up for pictures that look best as one and a half times as wide as they are tall—i.e., landscape mode. If you have dozens that look better being taller than they are wide, you could redo the script with 5 or 6 in a row, with thumbnails that are 100px wide and 150px tall.

The PHP code starts as so many PHP codes start: by getting the db connection data from a config file. It shows the password, username, and database name. Then we GET the cat variable. It got sent, via URL query string, to the PHP on the page after the user selects a category. If no category has been selected yet, no thumbnails are displayed. The MySQL db is consulted for a list of categories which get pushed into a categories[] array. If the cat (for categories) variable is set, the photos[] array gets loaded from the photos db table. Note that both categories and photos are displayed in alphabetical order, courtesy of the SQL command ORDER BY. The $photos[$i]="images/".$cat."/".$photos[$i]; line is in a loop in which all photos get their names prepended with folder and subfolder.

Next, the two PHP arrays utilize JSON to get their array values into JavaScript for further use. Without JSON, this PHP-to-JavaScript conversion would not be possible. Then we use document.write to display all the current category's photos on the screen. As long as the process hasn't reached the last photo in the array, it keeps on displaying. It displays one 4-photo row at a time until there are no more. It displays images with the src attribute being the prepended (with the path including folder and subfolder) p[] array value. It lined them up nicely to use an HTML table for the task. Note that one can only use JavaScript's document.write as the page is loading. After that, its use will get you a whole new page—a result we surely do not want.

The line <a HREF='cms-view-photo-gallery.php?cat="+categories[w]+"'><b>"+categories[w]+"</b></a> shows one category choice, and, when used in a while loop that ceases once we get to num_cats_in_table, all category choices. Note that each choice is a link that reloads the page, but adds a query string to the URL with the name of the chosen category in the variable cat which the PHP GET will pick up upon page reload.

TERMS OF USE: You must put a link on your site's home page to:
<a HREF="http://www.css-resources.com">css-resources.com</a> and it must NOT be a "nofollow" link, now or ever, and the link must stay live and unbroken for as long as you use the photo gallery script you'll find on this page, and you may not edit any part of the link, which must say "css-resources.com". Your site must NOT, now or ever, be about violence or hate or crime or treason or porn or terrorism, and your photo gallery script site/page must not have photos involving violence or hate or crime or treason or porn or terrorism. Do not use the sample photos in our sample JavaScript photo gallery for anything: they're copyrighted by © Focus Multimedia Ltd., Serif (Europe) Ltd., and Hemera Technologies Inc. (Want hundreds of thousands of these photos CHEAP? Then go to: Focus Multimedia Ltd.) If you cannot accept these terms, please do not use our script. We reserve the right to deny our script use to anyone with an unacceptable website. Our script is copyrighted by us, at MCS Investments, Inc. All these codes work—we have a working version we use here using this same code.

SAVE THIS PAGE AS: cms-view-photo-gallery.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>PHP Based Photo Gallery</TITLE>
<meta name="description" content="PHP Based Photo Gallery">
<meta name="keywords" content="PHP Based Photo Gallery,Photo Gallery,php,javascript, dhtml, DHTML">
<head>
<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left;background-color:#ddd}
p, li {font:13px Verdana; color:black;text-align:left}
h1 {font:bold 40px Verdana; color:black;text-align:center}
.t {position:absolute;top:0px;left:250px;}
h2 {font:bold 24px Verdana;text-align:center}
h3 {font:bold 15px Verdana;}
.pics {padding:0px;margin:10px 10px 10px 10px;height:100px;width:152px;border:1px solid black}
.pic {width:744px;position:absolute;top:52px;left:140px;}
.info {width:95px;position:absolute;top:52px;right:0px;padding:6px;background-color:#fff;border:1px solid #000}
.cat {width:95px;position:absolute;top:52px;left:2px;padding:6px;background-color:#fff;border:1px solid #000}
.info2 {width:95px;position:absolute;top:220px;right:0px;padding:6px;background-color:#fff;border:1px solid #000}
.big {position:absolute;top:52px;left:-1777px;width:754px;text-align:center;padding:0px;background-color:#bbb;border:4px solid blue}
.title {position:absolute;top:566px;left:-1777px;width:762px;text-align:center;padding:0px;background-color:#fff;border:1px solid blue;font-size:13px;font-weight:bold;}
</style>
<script language="javascript">
mactest=(navigator.userAgent.indexOf("Mac")!=-1) //My browser sniffers
is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1
Netscape=(navigator.appName.indexOf("Netscape") != -1)
msafari=(navigator.userAgent.indexOf("Safari")!= -1)
wsafari=0; if(!mactest&&msafari){wsafari=1;msafari=0}
is_opera = 0; if(window.opera){is_opera=1}
is_ie_mac = 0; is_ie=0;if(document.all){is_ie=1}
if(is_ie&&mactest){is_ie_mac=1}

function fixem(){if(Netscape||is_opera){e=document.getElementById('ti');e.style.top='-30px';}}

function fix(n){over.src=p[n];e=document.getElementById('a');e.style.left='125px';t=t+50;e.style.top=t+'px';e=document.getElementById('j');e.style.left='125px';tt=t+521;e.style.top=tt+'px';document.getElementById('j').innerHTML=p[s];if(Netscape||is_opera){e.style.width='760px';}}

function unfix(n){over.src=p[n];e=document.getElementById('a');e.style.left='-1777px';e=document.getElementById('j');e.style.left='-1777px';}

function startmouse() {if(Netscape) {document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=getCoords;}

var tt = 0;
var t = 0;
var s = 0;
var i = 0;
var f = 0;
var a = 0;
var b = 0;
var c = "";
var m = 0;
var q = 0;
var qh = 0;
var qv = 0;
var yy = 0;
var x = 0;
var y = 0;
var ys = "0";
var u = "0";
var xx = 0;
var v = 0;
var w = 0;
var cat = 0;

//photo placements: 156/70 - 306/170 = w150 h100 down: 198 (+128) left: 336 (+180)

function top(){
var top = document.body.scrollTop
? document.body.scrollTop //IE
: (window.pageYOffset
? window.pageYOffset //Netscape
: (document.body.parentElement
? document.body.parentElement.scrollTop
: 0));t=top}

function getCoords(e){f=0;
if (!e) var e = window.event;
if (e.pageX){x = e.pageX;y = e.pageY;}
else if (e.clientX){x = e.clientX + document.body.scrollLeft;y = e.clientY + document.body.scrollTop;}
m=1;a=170;b=70;
while (m<=Math.ceil(p.length/4)){
if (y<a&&y>b){yy=y;qv=parseInt((y-70)/128);yy=y-qv*128;f=1;break}
a=a+128;b=b+128;m++}
i = Math.ceil(p.length/4);if (y>(70+128*i)){f=0;}
m=1;a=310;b=156;
while (m<=4){
if (x<a&&x>b){xx=x;qh=parseInt((x-156)/180);xx=x-qh*180;f=f+1;break}
a=a+180;b=b+180;m++}
if (x>(156+180*parseInt(p.length/4))){f=0;}
s=qh+qv*4;top();
if (f==2&&s<p.length){fix(s);}else{unfix(s);}
}

</script>

</head>

<?php
include_once"config.php";

$cat=$_GET['cat'];

$categories=array();

$res = mysql_query("SELECT category FROM categories_ order by category") or die(mysql_error());
while ($row = mysql_fetch_row($res)) {
array_push ($categories, $row[0]);
}

$num_cats_in_table=mysql_num_rows($res);

$photos=array();

if(isset($cat)){
$reslt = mysql_query("SELECT photo FROM photos WHERE category='$cat' order by photo") or die(mysql_error());
while ($row = mysql_fetch_row($reslt)) {
array_push ($photos, $row[0]);
}
$num_photos_in_table=mysql_num_rows($reslt);

for ($i=0;$i<$num_photos_in_table;$i++) {
$photos[$i]="images/".$cat."/".$photos[$i];
}

}else{$num_photos_in_table=0;}

mysql_close();

?>

<script language="javascript">

var categories = <?php echo json_encode($categories); ?>;

var p = <?php echo json_encode($photos); ?>;

var num_cats_in_table = <?php echo json_encode($num_cats_in_table); ?>;

var num_photos_in_table = <?php echo json_encode($num_photos_in_table); ?>;

document.write('<div class="pic"><table border="1" style="text-align:center;border:1px solid black">')
v=p.length; w=0;
while (w<v){
if(w<v){document.write('<tr><td><a HREF="#"><IMG SRC="'+p[w]+'" class="pics"></a></td>');w++}
if(w<v){document.write('<td><a HREF="#"><IMG SRC="'+p[w]+'" class="pics"></a></td>');w++}
if(w<v){document.write('<td><a HREF="#"><IMG SRC="'+p[w]+'" class="pics"></a></td>');w++}
if(w<v){document.write('<td><a HREF="#"><IMG SRC="'+p[w]+'" class="pics"></a></td>');w++}
document.write('</tr>');}
document.write('</table></div>');

w=0;
document.write('<div class="cat"><table>');
while (w<num_cats_in_table){
document.write("<tr><td><a HREF='cms-view-photo-gallery.php?cat="+categories[w]+"'><b>"+categories[w]+"</b></a></td></tr>");w++}
document.write('</table></div>');

</script>

<body onload='startmouse(),fixem()'>

<div id='ti' class='t'><h1>Ye Olde Picture Gallery</h1></div>

<div class='big' id='a'><IMG name='over' SRC="error.gif" WIDTH=752 HEIGHT=512 BORDER=1></div>

<div class='title' id='j'> </div>

<div class='info'>For larger images, simply hover the cursor over the desired picture.</div>

<div class='info2'>Images copyrighted © by Focus Multimedia Ltd., Serif (Europe) Ltd., and Hemera Technologies Inc. </div>

<?php include("navi.html"); ?>

</body>
</html>