5分でイメージライブラリを作る

ウェブサイトを作る時に写真だけ並べたいことがある。普通だとすべてイメージタグを手書きで書いたり、データベースにあらかじめ登録したりという作戦を考えるわけだが、最近では随分と楽になっているようだ。作ってみて大変驚いたので記録を残しておく。PHPとjQueryを前提にしている。
第一にディレクトリの一覧を取得する。いろいろなやり方があるのだが、foreach(glob,$name_of_directory,GLOB_BLACE) as $filename {処理}の1分で済んでしまう。directoryを開けたり閉めたりする必要はなくなっているようだ。$name_of_directoryはpath_to_dictory/{*.jpg}としておくと拡張子を限ってファイル一覧を表示することができる。
次にjqueryを読み込んだ上で、masonryを読み込む。グリッドレイアウトを簡単に実現ができるjQueryのプラグインである。
この時にイメージの幅や高さなど揃えたいものに合わせてイメージそのものを編集していたのだが、cssで一辺を指定しておけば揃えることが可能だという（簡単なことなのだが）に気がついた。
jQueryはイメージがロードされたということがわからないので初期表示に不具合が出ることがあるのだが、これもimageLoadedというプラグインがあるので、それを導入すると表示の不具合が解消される。
あとは、ファイルをディレクトリに入れて適切な鍵をかけて（一般公開されたくない場合は）Webサーバーにロードするだけだ。
以前のバージョンのライトボックスはprototype.jsを使っていたのだが、最新バージョンはjQueryになっているのでリンクタグをつけてrel=lightox[xxx]とするだけでライトボックス化もできる。
今回はディレクトリごとにスキンを作ったのだが、配列に入れ込めば一枚で済むんだなあと思った。