Create a php gallery

A tutorial on how to create a PHP gallery.

Below we have the php code to call the folder where the images are kept.

I called it


$files = "";
function returnimages($dirname=".") {
$location = '';

if ($handle = opendir($location)) {
/* This is the correct way to loop over the directory as per */
while (false !== ($entry = readdir($handle))) {
$ext = substr($entry,strpos($entry, ‘.’),4);
if($entry != “.” && $entry != “..”){
$allowed_extenstions= array(“.jpg”,”.jpeg”,”.png”,”.gif”);

echo “\n”;
echo ‘galleryarray[‘.$curimage.’]=”‘.$entry.'”;’;
//this will be written to client side
$location = ‘m-image’;
echo ‘var locations =”‘ .$location. ‘”;’;
echo ‘var galleryarray=new Array();’; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names

This is the output

php gallery text

output for the php gallery file

Now to explain each part of the PHP file

$files = ""; --->  is assigning nothing to $files variable.

function returnimages($dirname=".") —> creating the function called returnimages

and ($dirname=”.”) —> indicating the current directory.

$curimage=0; —> will be used on the array assigning a number to each image found.

$location = ''; –> is the location of the images.

if ($handle = opendir($location)) {  —> $handle is assigned to the opendir function.

while (false !== ($entry = readdir($handle))) { —> loops through the directory.

$ext = substr($entry,strpos($entry, ‘.’),4); —> assign $ext to the substring function.

substr($entry,strpos($entry, ‘.’),4); —> what this function is doing is looking for . in the name of the file then goes from the . then the rest of the extension. (ie: .jpg)

if($entry != “.” && $entry != “..”){  —> strips out . and .. from the folder.

$allowed_extenstions= array(“.jpg”,”.jpeg”,”.png”,”.gif”); —> is the array of allowed extensions.

if(in_array($ext,$allowed_extenstions)){ —-> checks to see if the extension is in the array
echo “\n”; —> writes  a new line.
echo ‘galleryarray[‘.$curimage.’]=”‘.$entry.'”;’; —> writes out the galleryarray and assign a number which we saw in the pictured example.
$curimage++; —> adds 1 to curimage.

closedir($handle); —> closes the connection to the directory.

$location = ‘’; —> write the $location again since it’s out side the function
echo ‘var locations =”‘ .$location. ‘”;’;
echo ‘var galleryarray=new Array();’;  —> Define array in JavaScript
returnimages()   —> Output the array elements containing the image file names

This is the code for the client side.

<!DOCTYPE html>



<script src=”getfolderinfo1.php”></script>

<script type=”text/javascript”>
var curimg=0;
function rotateimages(){
document.write(“<div class=’wrapr’><div class=’imgnav’><div class=’imglist’><ul class=’imgtest’>”);
for (curimg=0;curimg<galleryarray.length-1;curimg++){
var ids= curimg;
var hids=”imghref”+curimg;
document.write(“<li class=’panel’><a href=”+galleryarray[curimg]+”><img id='”+ids+”‘/></li></a>”);
document.getElementById(ids).setAttribute(“src”, locations+”/”+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+0 : 0

<script type=”text/javascript”>