参考にさせて頂いたページ

http://www.lateralcode.com/create-a-simple-picture-gallery-using-php/
PHPはこちらのページを参考にアップデートされたlightbox2に合わせて少し改変しました。またサムネイル画像の生成は省略しています。

http://huddletogether.com/projects/lightbox2/
lightboxの本家です。

目的

サーバにアップロードした画像の管理を行うアプリ開発の為の情報収集

環境

raspberry pi2(jessie)
Apache/2.4.10 (Raspbian)
PHP 5.6.20-0+deb8u1 + GD Library
FireFox 46.0.1 [クライアント]

内容

0. GDライブラリ

サムネイル画像を生成しないので不要です。ちなみにGDライブラリとはPHP スクリプトからグラフィックを直接操作するためのモジュールです。PHPと同様、apt-getを用いてインストールできます。
$ sudo apt-get php5
$ sudo apt-get php5-gd
infophp();を含んだphpスクリプトで確認できます。

info.php

<?php phpinfo(); ?>

GD Supportはenabledになっていることを確認。

1. html5で作っていきます

index.php(その1)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UFT-8">
<title>PHPを用いたシンプルな画像ギャラリー</title>
</head>
<body>

</body>
</html>

2. JSとCSSの参照を追加します

lightboxがjQueryを使っているとの事なのでそちらも追加。

index.php(その2)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UFT-8"/>
<link rel="stylesheet" href="./dist/css/lightbox.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<title>PHPを用いたシンプルな画像ギャラリー</title>
</head>
<body>

<script type="text/javascript" src="./dist/js/lightbox.js"></script>
</body>
</html>

3. Body

ちょっとした説明とPHP関数の呼び出しをBodyに追加します。

index.php(その3)

    <section id="gallery" class="gallery">
      <h1>アップロード画像一覧</h1>
      クリックすると拡大表示されます<br>
      <hr>
      <?php getPictures(); ?>
    </section>

4. PHPの記述

$img_dirで定義したディレクトリをOpenし、readdir()で順にエントリ名を取得してはecho()でhtml側に出力して行きます。アンカーにはlightbox2でページ内表示を行う為のアトリビュート"data-lightbox"を追加します。
またサムネイル画像の変わりに"width"属性を使っています。(大量の画像、サイズの大きな画像を扱う場合や回線が遅い場合、参考サイトのようにサムネイルを使用するべきかもしれません。)
サポートするフォーマットの画像ファイル外は、getPictureType()で拡張子を調べてフィルタリングしています。

index.php(その4)

<?php
$img_dir = './uploads/';
function getPictures() {
    global $img_dir;
    if ( $handle = opendir($img_dir) ) {
        echo '<div class="images">';
        echo "\n";
        while ( ($file = readdir($handle)) !== false ) {
            $path = $img_dir . $file;
            if ( !is_dir($path) ) {
                $split = explode('.', $file);
                $name = $split[0];
                $ext = $split[count($split) - 1];
                if ( ($type = getPictureType($ext)) == '' ) {
                    continue;
                }
                echo '<a class="image-link" href="'.$path.'" data-lightbox="imgs" ';
                echo 'data-title="'.$name,'">';
                echo '<img class="image" src="'.$path.'" width="240" alt="'.$file.'">';
                echo "</a>\n";
            }
        }
        echo '</div>';
        echo "\n";
    }
}

function getPictureType($ext) {
    if ( preg_match('/jpg|jpeg/i', $ext) ) {
        return 'jpg';
    } else if ( preg_match('/png/i', $ext) ) {
        return 'png';
    } else if ( preg_match('/gif/i', $ext) ) {
        return 'gif';
    } else {
        return '';
    }
}
?>

以上