Question

Trying to build a dynamic gallery that is loaded via AJAX.

I’m trying to get it to build a ul with as many list items as there are pictures, because each gallery has a different amount of images… something like this:

<ul id="foo">
 <li><a href="javascript:void(0);"><img src="../images/portfolio/foo/001.jpg></a></li>
 <li><a href="javascript:void(0);"><img src="../images/portfolio/foo/002.jpg></a></li>
</ul>
<div class="description">FOO TITLE / DESCRIPTION</div>

<ul id="bar">
 <li><a href="javascript:void(0);"><img src="../images/portfolio/bar/001.jpg></a></li>
 <li><a href="javascript:void(0);"><img src="../images/portfolio/bar/002.jpg></a></li>
 <li><a href="javascript:void(0);"><img src="../images/portfolio/bar/003.jpg></a></li>
</ul>
<div class="description">BAR TITLE / DESCRIPTION</div>

I’m not familiar enough with PHP to build in the foreach to the function I’ve built. Any help? Here is what I have so far (note the array I have is a temporary solution… it doesn’t work if the project has less/more than the 4 that I’ve listed in the array):

<?php function generateProject($projTitle,$projDesc) {

$proj = $_GET['proj'];

echo '<ul id="'.$proj.'">';

$array = array('001','002','003','004');

    foreach($array as $picture)
    {
        echo '<li><a href="javascript:void(0);"><img src="../images/portfolio/'.$proj.'/'.$picture.'.jpg"';
        echo '</li>';
    }

echo '</ul>';

echo '<div class="description">'.$projTitle.' <span class="slash">&nbsp;/&nbsp;</span>'.$projDesc.'</div>';

} ?>


<?php
    generateProject(
    'deadAWESOME',
    'Gargoyles. Dusty leather tomes. Hidden rooms. Coffee.');
?>

Answer 1

First of all, it’s kind of insecure to take the $proj path directly from $_GET. You should check it against an array of acceptable values or a regular expression before placing it into the URLs. In this case as long as the web server’s document root is setup correctly, not much damage could be done. But it’s a good habit to be in to protect your paths.

$proj = $_GET['proj'];

// Method 1:  regex
// Test that proj is only lowercase letters...
if (!preg_match("/^[a-z]+$/", $proj)) {
   // Oops, invalid $proj
}

// Or as ctype_alpha()
if (!ctype_alpha($proj)) {
   // invalid $proj
}

// Method 2:  whitelist array
// Array holds the valid possible values for $proj
$valid_proj = array("project1", "barmitzvah", "wedding");
if (!in_array($proj, $valid_proj)) {
  // Oops, invalid project
}

To get all the images from the filesystem, you can use readdir().

// Use a glob to get all the images *.jpg
$imgs = glob("/filesystem/path/to/images/portfolio/$proj/*.jpg");

foreach ($imgs as $picture) {
  // Get only the base filename
  $picture = basename($picture);

  // Then build the <li>
  echo '<li><a href="javascript:void(0);"><img src="../images/portfolio/'.$proj.'/'.$picture;
  echo '</li>';
}