Dynamic image gallery generation using PHP and jQuery

Question

I've got an idea in my head, something I want to create, but am not sure about the best approach. I'd like to pitch the idea and get some opinions on a smart way to go about this before I dive headfirst in the wrong direction!

I've got a photography website that displays multiple portfolios for a few different photographers. It's got thumbnails and large images, and they are organized into li in a ul .

The idea:

I'd like to have a login requiring only a password that takes you to a page allowing you to upload, rename, or delete files in a specified directory. The directory would be defined by a selection in a dropdown menu.

After the images are uploaded I'd like them to be resized into a large image and a thumb, the thumb in a sub-directory, and have the files named sequentially.

The gallery page would automatically create one gallery per folder in a specified directory. Each folder containing the images and a thumb folder.

What I'm thinking:

I'm thinking PHP or Perl script for image upload and manipulation, and maybe using a script out there for AJAX file upload and manipulation, but I'd like to hand code as much as possible.

I imagine after each upload session is finished that a PHP script would generate HTML into the gallery file, rather than each time a visitor access the page having it create the content based on the directory.

Could I get some advice on how best to approach this?

• Which languages are best suited for each step? (I'd like to use mostly jQuery as that is most of my JS)
• Any suggestions on the methods or sequence?
• Things to avoid doing all together?

Thanks in advance!

Answer 1

all you need is a good file uploader, jquery based gallery plug in and some help of a php function "file_put_contents". the process here is after a successful upload your script should generate a proper ul li list of images from the desired folder. example:

$theGallery ="<ul class='gallery'>";
$dir = "dir_of/images";
$good_ext = array(".jpg",".gif");


if ($handle = opendir($dir)) {
     while (false!== ($file = readdir($handle))) {
     $ext = strrchr($file,".");
          if(in_array($ext,$good_ext))
          {
          //do something with file
          $theGallery .="<li><img src='".$file."'></li>";
          }
    }
closedir($handle);
}
else
{
$theGallery .="<li>Directory does not exist!</li>";
}
$theGallery .= "</ul>";

and then add some html and javascript code like:

 $(document).ready(function(){
      $('ul.gallery').toGallery();
 });

some jquery plug ins are easy to implement just like that. thanks to the selectors.

the final part of the script if to put your dynamically generated html codes to a file. so we gonna use the 'file_put_contents' or any functions that does do the same.