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;
    }
}
?>

```