ぬじろぐ

メモです。議論やコメントは受け付けておりません。当方オタクの女ですので、唐突に腐ったりします。注意。

ギャラリーPHPを作ってみる

お勉強です。

作りたいもの
  • 指定フォルダ内の画像をサムネイルで表示
  • サムネイルをクリックすると大きい画像を表示

指定フォルダ内の画像をサムネイルで表示

参考:
http://colors7.net/nondb-php-gallery/
http://phpspot.org/blog/archives/2009/03/phplightbox.html
要するにこういうことがしたいわけなので、まるごと参考にさせてもらいます。

フォルダの中身を取得してサムネイルを表示

サムネイルを正方形にしたいので、JQueryを変更。
サムネイル表示してくれるjQueryは色々あるっぽい。

Naulthumb

http://www.garralab.com/nailthumb.php
縦横比を維持したまま、正方形のサムネイル(キャプション付き)を生成するもの。
切り抜き位置など細かい設定ができる

MyThumbnail.js

http://kwski.net/jquery/813/
サムネイル生成。
コードが短くて済むみたいなので、こっちを使ってみることにします。
これを使う場合、サンプルのサムネイル生成の部分がまるごと不要になります。
よって、サムネイルを保存しておくフォルダは削除。

サムネイルをクリックすると大きい画像を表示

サンプルでPiroboxを使用しているところを、LightBoxに変更。
単に好みの問題です…
http://www.lokeshdhakar.com/projects/lightbox2/

完成品

http://earth-model.under.jp/cgi/gallery/
ソース見ればわかりますが、要はphpでひたすら画像表示のタグを生成してるだけなわけで…
これが1つできてしまえばjQueryを取り換えるだけでスライドショーとか色んなものが作れるのかな、と。
ピンタレスト風のギャラリー等を作ってくれるjQueryを入れる場合は、サムネイル化の部分がいらなくなりますね。

要素をタイル状に並べてくれるjQuery

http://vnjs.net/www/project/freewall/

今後の課題

せっかくなので、以下の機能も付けたい。

  • ブラウザから画像をアップロードする
  • 画像にキャプションをつける
  • ブラウザ上からアップロードだけでなく画像の削除もできるようにする

ブラウザから画像をアップロードする

これは簡単。
画像格納用フォルダのパーミッションを「書き込み可」にするのを忘れない事。
このままだと誰でもアップできてしまうので、実際に運用する場合はパスワード等でアクセス制限をかける必要がありますね。

htaccessを使ったアクセス制限
http://www.kens-web.com/2011/06/1235

参考:
http://memopad.bitter.jp/w3c/php/php_file_upload.html
http://www.php-labo.net/tutorial/php/upload.html

キャプションをつける

キャプションを入力する欄を追加

欄を追加するだけなら簡単なんです…
画像を保存と同時に、画像ファイル名、キャプションをcsvファイルに出力するように変更。

csvファイルから一覧を読み込み

画像フォルダからファイル一覧を取得していたのを、csvファイルから取得するように変更。

日本語文字化け回避
http://codaholic.org/?p=287

Light Boxにキャプションを表示

テキストをaltに入れればキャプションとして表示してくれる機能があったはず…