画像をフェードさせながらランダムに入れ替える
CSS3のbackground-sizeを利用して画像をフェードさせながらランダムに入れ替えるJavaScript
以下の記事は内容が些か古くなっています。 改訂版を出していますので、そちらを参照してください。
IE9もベータ版が登場して、CSS3のbackground-sizeに対応するようになった。 Firefox(3.6ではプリフィクス付きだが)、Safari、Operaはすでに対応済み。
そこで、このbackground-sizeを利用して、画像をフェードさせながらランダムに入れ替える処理を考えてみた。 サンプル・デモ
画像の入れ替え自体は今までにもよく知られた「テク」(爆)だが、これまでは画像のサイズを全部同じにしなければいけなかったり、全部プリロードさせるために重くなったり、メンテが大変だったり、…と使い勝手はそんなに良くなかった。
しかし、このスクリプトは画像サイズには基本的に制限はないし、枚数も自由(その都度、次の画像だけをプリロードさせているため)。メンテは、javascriptの関数における引数1カ所(最大枚数)だけを管理しておけばいい。ついでにいえばフラッシュもjqueryも不要。
Firefox、Safari、Opera、Chrome、IE6~9(Beta)で動作確認。i-Modeのフルブラウザも現状opacityに対応していないのでフェードはしないが、ランダムな画像の入れ替えは行われる。
適用方法とサンプルソース
あらためて整理しました
- 画像の準備
- 特定のフォルダ(この例では"./random/")に画像を用意。枚数に制限無し
- 画像のファイル名は「1.jpg」「2.jpg」など、連続した通し番号にしておく
- 画像のサイズは全部同じでなくてもいい (400px*300px、200px*150pxなど縦横比さえ揃っていればOK。実際の表示サイズはCSSで調整しているので)
- 同じページ内にある複数の違う画像群を同時に処理したり(<body onload="imgFader(1, 24, './random/'); imgFader(1, 10, './random2/');">など)、ページ毎に違う画像群を使うことも可能
- HTML断片例
<body onload="imgFader(1, 24, './random/');"> <!-- スクリプトはbody要素のonload属性で呼び出す。 引数は順に、最初の画像番号、画像の総枚数、画像フォルダへのパス。 画像の枚数を変更した場合は、この第2引数を変更 --> <p> <span id="image_container"> <img src="./random/1.jpg" id="random_photo" /> </span> <!-- 画像を(ダミーの)親要素(spanやdivなど)の中に配置 --> </p> </body>
- CSS例
#image_container { position : absolute; /* またはfloatなどでポジショニングが必要みたい */ padding : 0; width : 16em; height : 12em; } #random_photo { width : 16em; height : 12em; } /* 画像サイズと親要素(id="image_container")のサイズを揃えること */
- JavaScript
- ランダムな画像をランダムにフェードさせながら入れ替える Ver.3をご利用ください
最初っからランダム表示させたい
うちのサイトへのリンクを逆引きサーチしてたら、「最初の画像もランダムに表示したい」という質問(<img src"○.jpg">の○をランダムに! | OKWave)が出ているようで、それに一応お答え。 OKWaveにアカウント持っていないのでここに書き残しておきます。
先の回答例に挙がっているようにdocument.write('hoge');
で書き出すのもいいけど、img要素を書き出すだけじゃダメで、onload属性の値も一緒に変更させることを忘れずに。あと<noscript></noscript>
でスクリプトが無効な環境へのご配慮もぜひ。
それよりも
- PHPでランダム出力
- jQueryを使うw
というファイナルアンサーでいかがでしょう?
PHPは実際にうちでもそうしてます。コードを例示すれば…
<?php $m1 = 24; $i1 = rand(1, $m1); echo '<body onload="imgFader('.$i1.', '.$m1.', "./random/");">'."\n"; ?> (略) <?php echo '<span id="image_container"><img id="random_photo" alt="" src="./random/'.$i1.'.jpg" /></span>'."\n"; ?>
jQueryを使う方法は、無駄にjQueryを使ってトップ画像をランダム表示にした | 星光のつれづれ日記あたりをご参考にどうぞ。
"画像をフェードさせながらランダムに入れ替える"へのTwitter上でのコメントやRT
ツイートを取得できませんでした。