lightbox.js とPHPで手軽にフォト・アルバムを作成

写真の公開するには、Flickrなどのサービスを使うのもいいのですが、自分のサイトに画像ファイルをおきたい場合もあります。そこで手軽にlightbox.jsで写真をスライドショー表示するための、簡単なPHPを作ってみた。こんな感じ。

• デモ : cafe Brasserie HxM Bar

設置方法

基本的には、写真とサムネイル画像を、ひとつのディレクトリにまとめてアップしておいて、PHPでそのディレクトリをパースしてlighbox.js用のHTMLを出力するだけ。かなりシンプルです。

• lightalbum.php.txt

利用方法は、上記のスクリプトを保存して、lightalbum.php という名前でサーバにアップロード。次に肝心の lightbox.js を以下のサイトからダウンロード。

• Lightbox JS v2.0

注意: 最新版のLightbox v2.04を利用する場合は、一部ファイル構成などが変更されているそうなので、YKTさんからいただいたコメントを参考に、phpファイルを修正してください。

解凍したら「lightbox」というフォルダ名で、lightalbum.phpをアップしたディレクトリにアップロード。そして同じ場所に、写真を入れるphotosディレクトリを作成。ディレクトリ構成はこんな感じになります。

次に写真とサムネイル画像をアップロードするのですが、スクリプトが自動的に判別できるように、画像の名前が一定の規則に従っている必要があります。例えばこんな感じ。

このケースは、「IMG_0632-01.jpg」という写真のサムネイルは「IMG_0632-01-01.jpg」という名前になっています。通常サイズの写真は「-01.jpg」とい末尾で終わり、サムネイルには「-01-01.jpg」という末尾が付いている、という法則があります。

これは、ImageReady のドロップレットで自動で加工＆保存した場合に、上書き保存されないように、システムがファイルの最後に-01をつけて自動保存することで、こうなっています。ドロップレットによる自動処理については、後で書きます。ひとまずは、このような法則に基づいて、写真とサムネイルが複数アップされていることが必要です。

PHPスクリプトの設定

PHPスクリプトの設定は、PHPのソースコードの最初の部分を編集。

  
 $liburl = "./";   // lightbox フォルダのあるパス

次に、写真とサムネイルのファイルを判別する法則を記述。

  
  $thumb_disc = "-01-01.jpg";  // サムネイル画像の末尾
  $large_disc = "-01.jpg";  // 拡大画像の末尾

スクリプトは、サムネイル画像の末尾指定に一致するファイルを探してリスト表示します。また同時に、リンク先になる拡大画像は、サムネイル画像の末尾を、拡大画像の末尾で置換したファイル名が指定されます。

最後にアルバムの情報を、配列で記述。アルバムは複数指定することができて、配列の番号が、アルバム番号になります。

• "title" => "アルバムのタイトルを自由に設定",
• "subtitle" => "サブタイトルを自由に設定",
• "img_path" => "./photos/sample1", 写真のあるフォルダのパスを相対指定。public_html など、webで表示可能な場所に写真をアップして、その場所を指定する必要があります。
• "password" => "" に英数文字を指定すると、簡易パスワード保護。指定しないと、パスワード保護しません。ただし、画像自体はweb表示可能な場所にあるので、あくまでも簡易です。

以下のように複数のアルバム情報を指定した場合は、lightbox.php?num=1 というようにnum=アルバム番号で、それぞれのアルバムを表示します。

  $album[0] = array(
    "title" => "アルバム1", 
    "subtitle" => "このアルバムの説明",
    "img_path" => "./photos/album1",
    "password" => "album1password" );

  $album[1] = array(
    "title" => "アルバム2", 
    "subtitle" => "二番目のアルバムの説明",
    "img_path" => "./photos/album2",
    "password" => "" );

以上、かなり短時間で作った適当スクリプトですが、わりと役立ってます。というか、lightbox.js がほとんど重要なことをやってくれるのですが（笑）

画像の編集の方法

デジカメだと一度に１００枚とか軽く撮影してしまうので、まとめて処理するためにImage Ready のドロップレットを使っています。

写真をweb用に縮小するドロップレット（Droplet）

自分のWEBサイトに表示する写真のサイズは、縦写真は横幅を250pxに、横長の写真は横幅を500pxと決めています。それぞれのサイズに自動縮小、保存するアクションを、Adobe フォトショップに付属するImageReadyで作成します。そのアクションをデスクトップにドラッグ＆ドロップして、ドロップレットを作成。

サムネイル画像を作成するドロップレット

次にサムネイル画像を作成するドロップレットも作成。これは上記のドロップレットで縮小した画像を、さらに半分に縮小して中心の１２０pxを切り出すことで、正方形のサムネイルを作成します。

Droplet を使う

フォトショップのファイルブラウザから複数の画像を、上記で作成した横長or縦長画像縮小のDropletにドラッグ＆ドロップ。元画像の末尾が"-01.jpg"のように変更されて保存されます。

縮小した画像とサムネイルを両方アップロード

上記で作成した画像をまとめてアップロードすると、サムネイルは"-01-01.jp"という末尾で、大きな画像は"-01.jp"とい末尾になるルールの画像になっているので、lightalbum.php の設定をそのように指定すればOK。