Image gallery with pagination using CSS, $_GET, and Bootstrap

I am relatively new to web development and I created an image gallery with pagination using the Twitter Bootstrap framework. Basically, I want to know if I approached creating an image gallery correctly and what I could do to improve. The basic idea was that each pagination <li> element linked with a different get variable and I then used an array of images to update the view.

PHP

<?php

$dir = "./images/NYC/Gallery/";
$perPage = 18;
if($_GET['currentPage']) {
    $currentPage = $_GET['currentPage'];
} else {
    $currentPage = 1;
}

if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        $images = array();

        while (($file = readdir($dh)) !== false) {
            if (!is_dir($dir.$file)) {
                $images[] = $file;
            }
        }

        closedir($dh);
    }
}

$numImages = count($images);
$numPages = round($numImages / $perPage + 1);
if($currentPage == 8) {
    $images = array_slice($images, ($currentPage-1) * $perPage);
} else {
    $images = array_slice($images, ($currentPage-1) * $perPage, $perPage);
}
?>

HTML/CSS

 <div class="gallery-container">
<?php
    foreach($images as $image) {
        echo "<div class='gallery modal-pic'><img src='".$dir.$image."'/></a></div>";
    }
?>
</div>
<div id="paginate">
    <nav>
        <ul class="pagination">
            <li><a href="gallery.php?currentPage=1">1</a></li>
            <li><a href="gallery.php?currentPage=2">2</a></li>
            <li><a href="gallery.php?currentPage=3">3</a></li>
            <li><a href="gallery.php?currentPage=4">4</a></li>
            <li><a href="gallery.php?currentPage=5">5</a></li>
            <li><a href="gallery.php?currentPage=6">6</a></li>
            <li><a href="gallery.php?currentPage=7">7</a></li>
            <li><a href="gallery.php?currentPage=8">8</a></li>
        </ul>
    </nav>
</div>

<style>
    body {
        padding-top: 50px;    
    }

    .gallery {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width:180px;
      height:120px;
    }

    .gallery:hover {
        border: 1px solid #777;
    }

    .gallery img {
        max-height:100%;
        max-width:100%;
        margin:0 auto;
    }

    #title {
        text-align:center;
        margin-bottom:0;
    }

    #paginate {
        text-align:center;
    }

    .gallery-container {
        margin: 0 auto;
        text-align:center;
        padding-left:65px;
    }

    .clear {
        clear:both;
    }

</style>