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

getfolderinfo1.php


<?php
$files = "";
function returnimages($dirname=".") {
$curimage=0;
$location = 'ftp://blah:blah@www.dreamcpu.com/images';

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

echo “\n”;
echo ‘galleryarray[‘.$curimage.’]=”‘.$entry.'”;’;
$curimage++;
}
}
}
closedir($handle);
}
}
//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 = 'ftp://blah:blah@www.dreamcpu.com/images'; –> 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 = ‘ftp://blah:blah@www.dreamcpu.com/images’; —> 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>

<html>

<head>

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

</head>
<body>
<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=http://www.sinacomp.com/images/”+galleryarray[curimg]+”><img id='”+ids+”‘/></li></a>”);
document.getElementById(ids).setAttribute(“src”, locations+”/”+galleryarray[curimg])
document.getElementById(ids).setAttribute(“width”,”300px”)
document.getElementById(ids).setAttribute(“height”,”300px”)
curimg=(curimg<galleryarray.length-1)? curimg+0 : 0
}
document.write(“</ul></div></div></div>”);
}
</script>

<div>
<script type=”text/javascript”>
rotateimages();
</script>
</div>

</body>

</html>