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>
Image gallery with pagination using CSS, $_GET, and Bootstrap
php;html;css;image