jQuery – フェードイン フェードアウト

WordPressのページで、jQueryを使用して、フェードイン、フェードアウトをやってみます。

jQeryスクリプトは、以下のようになります。

<div>
<script type=”text/javascript” src=”/incj/jquery.1.9.1.min.js” ></script>
<script type=”text/javascript”>
var gctr = 1;
var gazot = new Array();
gazot[0] = “http://****/001.jpg”;
gazot[1] = “http://****/002.jpg”;
gazot[2] = “http://****/003.jpg”;
gazot[3] = “http://****/003.jpg”;
$(function() {
setInterval(“slide_s()”, 10000);
});
function slide_s(){
$(‘#box1’).fadeOut(1000,gazonext_s);
$(‘#box1’).fadeIn(1000);
}
function gazonext_s(){
gctr ++;
if (gctr>4){ gctr = 1; }
var gazo = gazot[gctr-1];
$(‘#box1 img’).attr(‘src’, gazo);
}
</script>
</div>

WordPressでjQueryを使用するには、基本的には、header.phpを編集することになります。多くのサイトがこの方法の解説をしていますが、どこも結構難しく、かつ面倒な感じがします。phpの得意な人はこの方法がいいと思います。
ただ、header.phpはWordPress全体のインクルードファイルですから、特定のページだけで使いたいという場合はまた別の問題が出てきます。
プラグインでやる方法もあるようです。プラグインのインストールに慣れている人はこの方法がいいと思います。

ここでは、そのどちらでもない、直接文中にスクリプトを記述する方法でjQueryを動かしてみようと思います。
上記のようにJavaScriptを記述します。記述の方法で、普段と違うのは、タブやスペースを入れないことと、空の行を入れないことです。
書いたJavaScriptを<div>で囲います。これが重要です。
普通にHTMLで<script>を書いて、それを表示しようとすると、WordPressはそれに<p>をつけ足して単純な文として扱います。<br>も入ります。従ってスクリプトとしては読み込まれず、運良く読み込まれても、エラーになり、JavaScriptは動きません。
そこで、上記のように<div>で囲ってやると、<p>が足されず、<br>もつきません。ブラウザは、この部分をJavaScriptとして読み込み、実行してくれます。

$(function(){がjQueryのスタート部分です。ここでは単純にsetIntervalでタイマーをセットしています。実際にはAjax等との組み合わせで、setTimeoutの方が実用的だと思いますが、その違いはまた別の機会に。
実際の処理部分のslide_s()に、fadeOutとfadeInを書きます。
fadeOut(1000,gazonext_s)は、コールバックという関数の書き方です。
つまりfadeOutが終了した時にgazonext_sが呼ばれるということになります。
これを単純に一行づつ書いてしまうと、fadeOutの途中、あるいはその前にgazonext_sに処理が移り、旧画像が消えないうちに、新しい画像に変わってしまうということが起こります。
逐次(同期)処理では問題ありませんが、fadeOutのような非同期処理のプログラムには、コールバック関数を意識しておく必要があります。

ここでは、あらかじめ複数の画像を配列としてセットしてあります。実際のサイトで画像や記事を変えてゆくのには、次々と新しい情報を提供する方がシステムとしての付加価値は高くなります。
そのためには、Ajaxを使ってサーバーと通信し、その情報を取得しHTMLにセットすることが必要となるでしょう。フェードインやスライドショーは、やはりAjaxとセットと考えるのがいいと思います。

Ajaxに関してはまたの機会に……。

ついでに<iframe>を使った天気予報を貼り付けてみました。やり方は<script>と同じで、<div>で囲ってやります。


Comments are closed.