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/blog/wp-content/uploads/2007/03/random/';
  4. 3で指定したフォルダに、「rotate.php」と「ランダム表示させたい画像たち」を放り込む。
  5. あとはアップした「rotate.php」にアクセスしてやれば、ランダムな画像が表示される。

とまぁ非常に簡単。

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

用意した画像はこの3つ→現在試験的に6つにしてます。(例によってニコニコ動画より拝借)

陰陽師1
陰陽師2
陰陽師3
陰陽師4
陰陽師5
陰陽師6

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

<img src="/blog/wp-content/uploads/2007/03/random/rotate.php" width="200" height="96" alt="ランダム陰陽師" />

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

ランダム陰陽師

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

CSSでの背景画像の場合

div#random-back {
width: 200px;
height: 96px;
background: url(/blog/wp-content/uploads/2007/03/random/rotate.php) no-repeat;
}

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

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

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