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>

Writing your first jQuery function.

With my first tutorial I am going to show you how to make your first jQuery function from beginning to end.
For those who want to learn jQuery I am glad to help you out.
First things first. Lets get jQuery working on your site. You can download the jQuery library and have it hosted locally or you can point to the jQuery library from an external site. I call an external site.  I use
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>. This is placed in between the <head> section of your site. So it looks like this…

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
</head>
...
...
</html>

Now that our website is now calling in the jQuery library lets create our first function.
Take out your favorite html editor. Mine is Notepad ++. It has so many options and allow for snippets and plugins, plus it allows to save in so many different languages.
Create a new file and lets start creating your function.
Type in…


$(document).ready(function(){

});

What this does is tell the client to wait for the document to be ready before executing your function.

Now we need something to code against. So on your page create an button with a class name of test.

<button class="test" >Test</button>

Now we code against the test class.
in between

$(document).ready(function(){

});

type in


$(".test").click(function(){
alert("Hello World!!!");
});

So your code will look like this…


$(document).ready(function(){
$(".test").click(function(){
alert("Hello World!!!");
});
});

Now save it as myfirstjs.js and call it in your website at the end of the page before </body>

<script type="text/javascript" src="myfirstjs.js"></script>

When you click on your button you should get a messagebox that says Hello World!!!.
If you didn’t verify that the location of myfirstjs.js is in the same as your html file.
If it is in another folder just change the src to src=”foldername/myfirstjs.js” where foldername is the name of the location it is in.
Please leave me a comment if you have any questions or comments.
Thank you for checking out my first tutorial.