Isotope Photo Gallery Example

I'm not sure if school projects inspire me to do new things, or if they are so boring I try new things (at the risk of sound egotistical I lean towards the latter). I volunteered to make the website bit. It was a small part of a larger project, and I decided to take on the pseudo-business website from scratch and code it all in notepad++.

It's nothing special, but I am quite happy with the picture gallery. It makes use of the jQuery plug in Isotope, and an old PHP photo trick* I had laying around. Here is a link to the actual project. It's pink because I'm the only guy in the group.

http://morepie.geekwagon.net/desserts.php

Isotope is easy enough to figure out. Okay, it took me a few hours, but for a real programmer it's probably stupid easy. My problem was that I had pictures with random file names all in the same directory that I wanted to use as objects for Isotope work its eye candy magic on.

This bit of PHP grabs all the files in a directory and turns them into div's Isotope can use. The first few lines are the Isotope buttons that make it sortable. It distinguishes between cake, pie, and other types of desserts by the first letter in the file name. I did have to go through and add a character to the beginning of each file name manually, but this was a one time simple project.

In the end I was pleased with the results. I am able to add and categorize pictures with a rename and an upload.

1:  <ul id="sort-by">  
2:   <p>Filter images by type -></p>  
3:   <li><a href="#" data-filter="*">all</a></li>  
4:   <li><a href="#" data-filter=".b">brownie</a></li>  
5:   <li><a href="#" data-filter=".c">cake</a></li>  
6:   <li><a href="#" data-filter=".p">pie</a></li>  
7:   <li><a href="#" data-filter=".o">other</a></li>  
8:  </ul>  
9:  <div id="gallery">  
10:  <?php //adapted from Nathaniel Sabanski's comment on 15-Mar-2009 12:49 at http://php.net/manual/en/function.opendir.php  
11:   $dir = "./gallery/"; //relative path to picture directory  
12:   if($handle = opendir($dir)) {   
13:    while($file = readdir($handle)) {   
14:     clearstatcache();  
15:     if ($file != '.' && $file != '..') {  
16:      $cata = $file[0];  
17:      $size = getimagesize($dir.$file);  
18:      echo '<div class="picItem '.$cata.'">  
19:      <img src="'.$dir.$file.'" height="'.$size[1].'" width="'.$size[0].'" alt="gallery image">  
20:      </div>';   
21:     }  
22:    }  
23:    closedir($handle);   
24:   }  
25:  ?>  
26:  </div>  

The code has some comments, mostly for me to remember how to use it. There is a URL link to where I got it in the first place.. which is always nice.

Also, thanks codeformatter.blogspot.com.

*The term trick to be used loosely.