phpで画像をランダムに表示させる
JavaScriptを使って画像をランダムに表示させるやり方は昔からあるし、検索かければ無数に出てくるんだけど、phpを使って手軽に画像のランダム表示をさせる方法を見つけたので、メモ書き。
元ネタはWEBデザイナーにはおなじみA List ApartさんのRandom Image Rotationから。
- まずは上記ページの下の方にあるテキストデータをダウンロードしよう。
分からない人はこいつを。 - この「rotate.txt」を「rotate.php」にしとく。
- 「rotate.php」を開いて107行目の「$folder = '.';」に、画像を入れておくフォルダをフルパスで指定してやる。例えばウチはロリポップサーバーなんで、以下のような感じになりました。
$folder = '/home/sites/lolipop.jp/users/lolipop.jp-dp*****/web/entry-images/2007/03/random/';
- 3で指定したフォルダに、「rotate.php」と「ランダム表示させたい画像たち」を放り込む。
- あとはアップした「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から追加されてる「タグ機能」とやらを入れてみました。
さらに、中途半端にやってた「カテゴリー」を思い切って削除。
再追加は未定で、しばらくは「タグ」だけで分別してこうと思います。
Message
Trackbacks (2)
- TrackBack URL
- バナー画像をランダムに変える OKANOs WEB Cstomize (2007年11月 8日 09:51)
- ランダム画像に関しては、JavaScriptによる方法はたくさん紹介されています... 続きを読む
- ランダム〜。 + URA dearest. + (2008年5月24日 09:20)
- 前々からやろうと思ってたタイトルバナーのランダム表示。 DECOチョコも届いたコ... 続きを読む
Comments (12)
はじめまして、こんばんは！
エントリー丁寧に解説していただいて、たすかりました！
実は私もWEBデザイナーの卵として修行中です。
仕事でこのプラグインを使うことになって、こちらを参考にさせていただきました。
ブログリストに追加させていただきますね♪
また遊びにこさせてください！！
（京都なんですね！私は隣の県のモノですｗｗ また困った時には助けてください☆）
おじゃましました♪
ちょちさん、はじめまして。
参考にしていただいてありがとうございます。
そんな事なら陰陽師の画像とか使うんじゃなかったー！と、今さら後悔してます。(-_-;)
WEBデザイン関連のネタはたまにしか書かなかったりしますが、見捨てずたまにのぞいてやって下さい。
LINKS追加どうもです。お互い頑張りましょう。
chocobitさん、はじめまして！
こ、これですよ、私が探していたのは！！
chocobitさん、A List Apartさん、感謝感激雨霰です。
本当にありがとうございました。
また遊びに来ますね。
もぐちんさん、はじめまして。
6月になって3月のエントリーに2つもコメントが入るとは、こちらとしても雨霰です。（梅雨入りの意味も込めて）
ランダム画像はこのサイトでは実際には使っていないので、もしよろしければサイトのどういった場面で使われたのか教えて下さいね。
はじめまして、ｐｈｐでのランダム画像再生の方法を検索していたところ、どこのHPでも分かりにくく、あちこちを回っていたところ、このHPにたどり着きました。 分かりやすい説明でとてもよかったと思います。部活のHPなどにこの方法を使おうと思っています。
Remieさん、はじめまして。
お役に立ててなによりです。
自分メモで書いたエントリーなのですが、「php ランダム画像」などの検索キーワードでこのページへ訪れる方が多いようですね。
陰陽師の画像が今さら感があって、申し訳ないかんじです・・・。
大変為になりました。シンプルだけどかなり使えそうですね(o^ー^o)
いえいえー。
いずれまたこのランダム画像を使ったリニューアルなどしようかと思ったり思わなかったりしてます！
ちょっと質問なのですが、
ランダム画像個々に、別々のリンクを貼るってことはできますか？
ソースを見たけど無理ですかね。。。
別々のリンクを貼るのは、ココで紹介したものでは無理かと思われます。
自分にもう少しソースを読めていじれる力があればよかったのですが、勉強不足で申し訳ない。。。
すごく簡単にやりたい事ができました！
わかり易く説明して下さり、本当にありがとうございます。
ryotiteさん。
お役に立ててなによりです！