phpで画像をランダムに表示させる

JavaScriptを使って画像をランダムに表示させるやり方は昔からあるし、検索かければ無数に出てくるんだけど、phpを使って手軽に画像のランダム表示をさせる方法を見つけたので、メモ書き。

元ネタはWEBデザイナーにはおなじみA List ApartさんのRandom Image Rotationから。

1. まずは上記ページの下の方にあるテキストデータをダウンロードしよう。
   分からない人はこいつを。
2. この「rotate.txt」を「rotate.php」にしとく。
3. 「rotate.php」を開いて107行目の「$folder = '.';」に、画像を入れておくフォルダをフルパスで指定してやる。例えばウチはロリポップサーバーなんで、以下のような感じになりました。

   $folder = '/home/sites/lolipop.jp/users/lolipop.jp-dp*****/web/entry-images/2007/03/random/';

4. 3で指定したフォルダに、「rotate.php」と「ランダム表示させたい画像たち」を放り込む。
5. あとはアップした「rotate.php」にアクセスしてやれば、ランダムな画像が表示される。

とまぁ非常に簡単。

この方法の利点は、(X)HTML内に画像を貼り込む場合と、CSSでの背景画像の両方に対応できる点。
実際にやってみましょう。

用意した画像はこの3つ。（例によってニコニコ動画より拝借）

(X)HTML内に画像を貼る場合

<img src="http://chocobit.com/entry-images/2007/03/random/rotate.php" width="200" height="96" alt="ランダム陰陽師" />

というふうに、「rotate.php」を貼る感じでソースを書くと

↑ランダムに表示してます。「更新ボタン」で確認してみて下さい。

CSSでの背景画像の場合

div#random-back {
   width: 200px;
   height: 96px;
   background: url(http://chocobit.com/entry-images/2007/03/random/rotate.php) no-repeat;
}

と、こちらも普通にbackgroundのurlにそのまま「rotate.php」を指定してやれば

↑空divの中の背景画像です。こちらもランダムに表示。

画像の形式は「.jpg」「.gif」「.png」に対応してるので、WEB上ではなんでもいけそうですね。

追記

エントリー内容とは関係ない話になりますが、Movable Type 3.3から追加されてる「タグ機能」とやらを入れてみました。
さらに、中途半端にやってた「カテゴリー」を思い切って削除。
再追加は未定で、しばらくは「タグ」だけで分別してこうと思います。