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.
3 comments:
Discover the Isotope Photo Gallery, featuring a diverse array of stunning images. Experience a user-friendly interface that makes browsing effortless and enjoyable.
It's not a big deal, however I'm very content with the image exhibition. It utilizes the jQuery plug in Isotope, and an old PHP photograph trick* I had laying around. Here is a connection to the real task. It's pink since I'm the main person in the gathering. virginia drug crime lawyer
Great interesting post. Thanks for sharing this beautiful post. keep sharing more interesting blogs. Maryland Sexual Abuse Lawyer Compassionate, committed, and very knowledgeable. A true professional.
Post a Comment