無駄にjQueryを使ってトップ画像をランダム表示にした | 星光のつれづれ日記

無駄にjQueryを使ってトップ画像をランダム表示にした

シェアする

  • このエントリーをはてなブックマークに追加

これまでトップのタイトル画像はphpを使ってランダムに表示していた
phpでランダムに表示する前はjavascriptを使って表示していたんだけど、今回またjavascriptに戻した。

なぜまた差し替えたかというと、少しでもブログの記事部分の表示を速くしようと思ったからだ。
javascriptで作られた物の中に『jQuery』って言う物がある。
それを使うとページの骨格が表示された後に遅れて画像を読み込むと言う事が出来る。
今回それを利用してみた。
なので今回のものはjQueryがすでに読み込んであるものとして話を進める。
読み込んでない場合はヘッダー部分に以下を書き加えておこう。

<script src="http://www.google.com/jsapi">
<script>
  google.load("jquery", "1");
</script>

ダウンロード

トップ画像ランダム表示するjavascriptをダウンロードする

使い方

まずヘッダーかフッター部分に上でダウンロードした『jquery.topimagerand.js』を読み込む。
そしてつぎに実行する部分を書く。

/* 読み込み */
<script type="text/javascript" src="http://www.example/js/jquery.topimagerand.js">
/* 実行する部分 */
<script type="text/javascript">
$(document).ready(function() {
    $('#header').topimagerand();
});
</script>

『http://www.example/js/jquery.topimagerand.js』の部分は自分のブログに合わせてください。
『#header』は『id=”header”』の場合で、『class=”header”』の場合は『.header』となる。
画像をランダムに表示したい場所に合わせて書き換えてください。

これで終了、と思わせておいてまだ続く。
『jquery.topimagerand.js』をテキストエディターで開いて、使用するタイトル画像のURLを書き加える必要がある。
11行目くらいにある下の部分を書き換えよう。

	img[0] = "トップ画像 その1";
	img[1] = "トップ画像 その2";
	img[2] = "トップ画像 その3";

画像をもっと使う場合は数字を増やしていくだけでOK。
そして以下の部分も自分のブログに合わせて書き換える。

target.append('<a href="ブログのホームのアドレス" title="ブログタイトル"><img src="' + img[no] + '" alt="ブログタイトル" /></a>');

これで一通りの設定等は終わりです。