Archive for the ‘jQuery’ Category

jQuery – スライダーをつけました

金曜日, 4月 10th, 2015

・スライダー
jQueryでスライダーを作成しました。ホームページとサンプルを兼ねて、交通情報のスライダーを載せてみました。部品として作成してありますので、iframeでパラメータを指定すればどのホームページにも貼り付けることができます。
jQueryのスライダーは、プラグインはいくつかあるようですが、自作の方が応用がきくので作ることにしました。フェードイン・フェードアウトとは違って、横に流れるテロップ用です。ブロック毎にできますから、写真と文字のセットで動かすこともできます。

スライダーはjQueryのanimate(アニメーション)コマンドを使用します。
jQueryの主なスクリプト。

//jQueryの初期化
$(function() {
  syoki_s();		
});
//スライダー関数
function slide_s(){
  slideX = -sllen;
  $("#myslide p").not(":animated").animate({left:slideX} 
  , "slow", "linear", slidecall_s);
}
//コールバック関数
function slidecall_s() {
 //後処理(文字、画像セット、タイマー等) 
  syori_s();
}
//文字列長さ取得
function gettxtlen_s(txt){
  var obj = document.getElementById("txt")
  obj.innerHTML = txt;
  return obj.offsetWidth;
}

・animate()はjQueryの組み込み関数(アニメーション)です。ここでは単純にslen分だけ左へ移動させています。slowに数字(秒数×1000)を入れると移動時間(速度)になります。今回のように移動距離が毎回異なる場合は計算が必要です。
・コールバック関数はアニメーションが終了した時に呼び出されます。ここに次の処理を書くと、アニメーションが重ならずに順次処理できます。コールバック関数はなくても動きます。
・今回のように異なる文字列を移動するには、各文字列の長さを取得する必要があります。ここでは、javascriptのoffsetWidthで取得しています。jQueryのwidthでも取得できますが、innerHTML等を理解していないと思わぬ結果になるので、注意が必要です。幅が固定のブロック要素や画像をスライドする場合はその必要はありません。

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

金曜日, 3月 14th, 2014

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>で囲ってやります。