I'm trying to make a gallery using PHP. The images load properly, but the next and previous buttons don't seem to work. Clicking next on picture #1 brings you to picture #3 but clicking back on picture #3 bring you to picture #2 which is correct. How should I change my code to make it so both go in order?
<?php
function listPicturesInDir($dir) {
$dirname = "../pictures/photos/" . $dir . "/";
$images = glob($dirname . "*.jpg");
$previousPic = "null";
foreach ($images as $image) {
$next = next($images);
$name = str_replace(".jpg", "", $image);
$fp = strrpos($name, '/', 5) + 1;
$name = substr($name, $fp, strlen($name));
$id = str_replace(" ", "", $name);
echo '<a href="#' . $id . '"><img class="galleryPics" src="' . $image . '" alt = "' . $name . '" title="'. $name.'"/></a>';
echo '<div id="' . $id . '" class="modalDialog">';
echo '<div>';
if($previousPic !== "null"){
echo'<a href="#'.$previousPic . '"><img src="../pictures/arrowLeft2.png" alt="Previous photograph" title= "Previous photograph" class="arrow"/></a> ';
}
if($next !== false){
$name_next = str_replace(".jpg", "", $next);
$fp_next = strrpos($name_next, '/', 5) + 1;
$name_next2 = substr($name_next, $fp_next, strlen($name_next));
$id_next = str_replace(" ", "", $name_next2);
echo'<a href="#'.$id_next . '"><img src="../pictures/arrowRight2.png" alt="Next photograph" title="Next photograph" class="arrow"/></a>';
}
echo '<a href="#close" title="Close" class="close">X</a>';
echo '<h2>' . $name . '</h2>';
echo '<img class="modalImg" src="' . $image . '" alt = "' . $name . '"/>';
echo '</div>';
echo '';
echo '</div>';
//echo $next;
$previousPic = $id;
}
}
?>