2014
9
12

jQueryプラグイン、Colorboxを使ったギャラリーを動的に生成するPHP

ディレクトリを指定したら、その中の画像を全部読み込んでギャラリーページを動的につくってくれるものが欲しいなーと思い、書いてみました!


前提

140609-1

前に、このように header などを部品化したサイトを社内サーバに作った経緯がありまして。

今回WPは関係なく、このサイトに写真郡のギャラリーページを作りたい、というものです。

構想

140912-1

図のように photo というディレクトリの中に、年数別、更に日付別に分けたディレクトリがあって、そこに jpg がたくさん入っているとします。用途としては、忘年会とか社員旅行とかそういった毎年の写真群を、社内HPで閲覧できるようにするという感じです。画像ファイルだけアップロードしておけば、ギャラリーページを勝手に生成してくれるphpを書いてみたいなぁと思いました。

140912-2

このように、index.php には各写真郡へのリストが表示してあって、そこをクリックすると gallery.php へ遷移して、動的にギャラリーを出力してくれる、という感じで。

jQueryプラグインを使ってちょっとカッコ良さげにできたらなぁと思います。アップロードする写真群は、そのままポップアップされる画像になるので、予め適切な大きさにしておく必要があります。わたしの環境では、小さいモニタに合わせて800×600pxあたりにしました。

サムネイルも自動生成にしたい

ギャラリー生成時に使うサムネイル(例として100×75px程度のもの)も、こちらも予め用意してアップロードしておく必要があります。…が、これももっと楽したい…!((└(:3」┌)┘))

というわけで、今回は社内ネットワークからしかアクセスできない&管理者が限られてるということもあり、画像ディレクトリのパーミッションが 777 でも大丈夫そうなので、「サムネイルが存在しなかったら自動で生成する」という機能もつけてみます。

初回表示の時に生成されることになるので、初回のみ重くなります。新しく項目追加したら管理者が動作確認をかねて初回表示してやれば良いかなと思いまして。

Lightbox風jQueryプラグイン、ColorBox

有名なプラグインですよね。シンプルで使いやすくて大好きです!こちらを使わせていただきます。

DLして解凍したら、jquery.colorbox.js を js ディレクトリにアップロード。今回は example2 が気に入ったので、そのディレクトリ内の colorbox.css と images(ディレクトリ)も同じ場所へ。

140912-3

これを使って、簡単に書いてみるとこんな感じの構造になります。

/photo/gallery.html(仮)

これだけで動きます!すごいですねー!10行目のかっこ内で要素を指定して(同じ名前にしてしまいましたが)、それを a タグに付加してやればOKです。同じ rel 名のものをグループ化して、ループ表示してくれます。

この例は必要最低限と思ってかなり削ってしまっています。パラメータを変えて動きをカスタマイズしたり、他にもいろいろできるのでググってみてくださいー!

構想

それでは、実際のギャラリーページをどういう形にしたいか書いてみます。

/photo/gallery.html(仮)

こんなhtmlを生成するように、phpを書いていきたいと思います!リンクはテキストではなくサムネイル画像に貼られるようにして、元画像が XXX.jpg だったら、サムネイルは sXXX.jpg という名前のルールにします。

あとは、タイトルや備考をつけたり、テーブルにしてみたり。横にいくつ並べるかは、自由に指定できるようにしたいですね。

実装

/module/header.php

現在のディレクトリを判定して、該当ページのみ、ハイライトより中に colorbox 設定を読み込んでいます。冒頭でも紹介しましたが、こちらの記事に、グローバルナビ部分も合わせて詳しく書きましたのでご参照いただければ。

/photo/index.php

こちらはギャラリーページへ遷移する前のインデックス。formを使って、タイトル・備考・画像へのパスを書いておきます。このボタンを押すとその内容を gallery.php に引き渡すことになります。

機能はボタンのまま、見た目をテキストリンクのようにすることも出来ます。こちらに書いたことがあります。

/photo/gallery.php

ギャラリーページ。全部一度に書くと長くなるので、ハイライト部分を省略して順に解説していきます。

1.画像ファイル名を配列に格納(サムネイルがなければ関数で生成)

こちらのコードはサムネイルが無かったら自動生成するので、予め1行目で指定ディレクトリのパーミッションを取得して、777 でないと処理を行わないようになっています。

指定ディレクトリ内(サブディレクトリまでは見ません)のファイル名を取得して、頭が s でない(サムネイルでない)こと、拡張子が .jpg または .JPG かどうか判断して(6行目)、条件を満たしたものだけ配列に格納(7行目)しています。

8行目で、s を付けたファイル名が存在するか確認して、なければ img_rsz() という関数に飛ばします。

サムネイルを自動生成しない場合は、こんな感じ。

2.サムネイル生成関数

横長写真なら5行目、縦長写真なら9行目の大きさが基準になり、元画像のサイズから縦横比固定で縮小した画像を生成します。サムネイルを手動でアップする場合はこの関数は必要ありません。

3.テーブル出力

サムネイルを手動でアップする場合は2~4, 32行は必要ありません。5行目はテーブルの横の数になります。サムネイルの大きさとページの横幅によって適切な数値が変わると思います。CSSはおこのみで~。

追記:ulリストで出力

後で気づいたんですがテーブルにする必要全然ない…!Σ(゚д゚lll) 普通にulリストで作っておけば行変えるとかもいらないですねw

こんなに短くなっちゃいましたw あとはCSSでどうにでもなりますね!

以上です!いかがでしたでしょうか?きっかけは、「ギャラリーちょうめんどくさい…!どうにかして更新楽したい…!!」という一心でした…w phpはまだあまり自信がないのですが、どなたかのお役にたてたら幸いです!

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2014/09/12
更新日:2014/09/18


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top