D-WEBトップニューススポーツ芸能2024年カレンダーベストセラー料理レシピ百科ログファイル一覧

jQuery - フェードイン フェードアウト (2014/3/14)


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

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


<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>

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

ここでは、そのどちらでもない、直接文中にスクリプトを記述する方法でjQueryを動かしてみようと思います。
上記のようにJavaScriptを記述します。記述の方法で、普段と違うのは、タブやスペースを入れないことと、空の行を入れないことです。
書いたJavaScriptを

で囲います。これが重要です。
普通にHTMLで<script>を書いて、それを表示しようとすると、WordPressはそれに

をつけ足して単純な文として扱います。
も入ります。従ってスクリプトとしては読み込まれず、運良く読み込まれても、エラーになり、JavaScriptは動きません。
そこで、上記のように

で囲ってやると、

が足されず、
もつきません。ブラウザは、この部分を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に関してはまたの機会に……。


 共有元ページ


スポンサー リンク



注目のタイトル

米津玄師 /メーカー特典あり】 馬と鹿 (映像盤(初回限定)) (CD+DVD(紙ジャケ)) (内容未定特典付)

時代を象徴するアーティストとして全世代から注目を集める米津玄師の新作「馬と鹿」は、大泉洋主演、池井戸潤原作のTBS系日曜劇場「ノーサイド・ゲーム」の主題歌として書き下ろした新曲。カップリングには2019年6月に配信リリースされたアニメーション映画『海獣の子供』主題歌「海の幽霊」も収録され、ノーサイド盤、映像盤、通常盤と3形態でのリリースとなる。



D-web ランキング ベスト

ベストセラー 危険なビーナス 東野 圭吾
音楽 【メーカー特典あり】 馬と鹿 ) ) 米津玄師
DVD 5×20 All the BEST!! CLIPS 1999-2019

ニュース
スポーツ
芸能 真空ジェシカ川北茂澄結婚発表「長い間お付き合いしている方」オズワルドラジオ最終回に乱入

旬の話題

  共有ブログ


Copyright © 2024 D-web Portal. All Rights Reserved.

当サイトへのリンクは自由です。 D-web ポータル