chocobit

html5テスト運用中

Search

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つ→現在試験的に6つにしてます。（例によってニコニコ動画より拝借）

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

(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から追加されてる「タグ機能」とやらを入れてみました。さらに、中途半端にやってた「カテゴリー」を思い切って削除。再追加は未定で、しばらくは「タグ」だけで分別してこうと思います。

Tag

Comments (17)

ちょち ()

はじめまして、こんばんは！
エントリー丁寧に解説していただいて、たすかりました！
実は私もWEBデザイナーの卵として修行中です。
仕事でこのプラグインを使うことになって、こちらを参考にさせていただきました。
ブログリストに追加させていただきますね♪
また遊びにこさせてください！！
（京都なんですね！私は隣の県のモノですｗｗ　また困った時には助けてください☆）
おじゃましました♪

chocobit ()

ちょちさん、はじめまして。
参考にしていただいてありがとうございます。
そんな事なら陰陽師の画像とか使うんじゃなかったー！と、今さら後悔してます。(-_-;)
WEBデザイン関連のネタはたまにしか書かなかったりしますが、見捨てずたまにのぞいてやって下さい。
LINKS追加どうもです。お互い頑張りましょう。

もぐちん ()

chocobitさん、はじめまして！
こ、これですよ、私が探していたのは！！　

chocobitさん、A List Apartさん、感謝感激雨霰です。
本当にありがとうございました。

また遊びに来ますね。

chocobit ()

もぐちんさん、はじめまして。
6月になって3月のエントリーに2つもコメントが入るとは、こちらとしても雨霰です。（梅雨入りの意味も込めて）
ランダム画像はこのサイトでは実際には使っていないので、もしよろしければサイトのどういった場面で使われたのか教えて下さいね。

Remie ()

はじめまして、ｐｈｐでのランダム画像再生の方法を検索していたところ、どこのHPでも分かりにくく、あちこちを回っていたところ、このHPにたどり着きました。　分かりやすい説明でとてもよかったと思います。部活のHPなどにこの方法を使おうと思っています。

chocobit ()

Remieさん、はじめまして。
お役に立ててなによりです。
自分メモで書いたエントリーなのですが、「php ランダム画像」などの検索キーワードでこのページへ訪れる方が多いようですね。
陰陽師の画像が今さら感があって、申し訳ないかんじです・・・。

匿名 ()

大変為になりました。シンプルだけどかなり使えそうですね(o^ー^o)

chocobit ()

いえいえー。
いずれまたこのランダム画像を使ったリニューアルなどしようかと思ったり思わなかったりしてます！

通りすがりです。 ()

ちょっと質問なのですが、
ランダム画像個々に、別々のリンクを貼るってことはできますか？
ソースを見たけど無理ですかね。。。

chocobit ()

別々のリンクを貼るのは、ココで紹介したものでは無理かと思われます。
自分にもう少しソースを読めていじれる力があればよかったのですが、勉強不足で申し訳ない。。。

ryotite ()

すごく簡単にやりたい事ができました！
わかり易く説明して下さり、本当にありがとうございます。

chocobit ()

ryotiteさん。
お役に立ててなによりです！

chomechome ()

情報ありがとうございました！とても分かりやすくて良かったです。
一つ質問があります。
自分はCSSの背景画像に貴殿のやり方で写真をランダムに表示させているのですが、
あとから画像を追加したら、追加した画像が表示されません。
つまり最初に入れた画像だけがランダムに表示されるのです。
これを回避する方法を教えて頂けると助かります。
よろしくお願いします。

chocobit ()

chomechomeさん。こんにちは！
あとから追加した画像が表示されないとのことで、自分の方でもいろいろとやってみたのですが、試したかぎりはあとから追加した画像も反映されています。
今試しにこの記事で使っていた3つの画像を6つに増やしてみたのですが（同じディレクトリに3つ画像を追加）、追加した画像もランダムに出現していると思われます。
chomechomeさんの方で起こっている原因が分からなくて申し訳ないです。。。

矢野 ()

初めまして、素人で申し訳ないのですがワードプレスでf8-liteを使っています
サーバーはロリポップです３，の放り込むフォルダを教えて頂けませんか？
wp-content→themes→f8-lite→imagesここに入れましたがうまくいきませんでした
デフォルトの画像はｺｺにあります

chocobit ()

矢野さんはじめまして。
すいませんワードプレスに関しては逆にこちらが素人なので、うまく助言できるかどうかわかりませんが、おそらく3で指定するフォルダのパスが間違っていて、うまくいかないのではと思われます。

ここと同じくロリポップなのでしたら、


$folder = '/home/sites/lolipop.jp/users/lolipop.jp-dp*****/web/●●●';
（*****の部分は、ロリポップから指定されている数字）
（●●●の部分は、サイトトップからの画像を入れたフォルダの場所）


というかんじでいけないでしょうか。

akit ()

こんにちは。
矢野さんと同じくWordpressのf8 liteで使わせてもらいました!
以前はコードで一枚一枚指定していたので大変でしたが、これはとても楽ですね!
助かりました、ありがとうございます!

Message

Message

Trackbacks (2)

TrackBack URL
バナー画像をランダムに変える OKANOs WEB Cstomize (2007年11月 8日 09:51)
ランダム画像に関しては、JavaScriptによる方法はたくさん紹介されています... 続きを読む
ランダム〜。 + URA dearest. + (2008年5月24日 09:20)
前々からやろうと思ってたタイトルバナーのランダム表示。 DECOチョコも届いたコ... 続きを読む

Page Top