Webサイトを見ていると、
- クリックすると画像が変わる
- マウスオーバーした画像が動く
- フォームに入力すると自動的に計算してくれる
- ページをスクロールすると画像やテキストが動く
などの動作をするものがあります。
これらの「ブラウザが動く」動作は「JavaScript」というフロントサイドプログラムで動いています。
（これに対して、検索結果などの「ボタンを押すと次のページが入れ替わっている」ような、サーバが動作しているプログラムはサーバサイドプログラムと呼びます）
このJavaScriptを機能ごとにまとめ、外から読み出す機能を持ったJavaScript（ライブラリ）の一つにjQueryがあります。
これにより、煩雑なプログラムの必要な機能も比較的簡単に実装する事ができます。
jQueryは独立した言語ではなくJavaScriptのライブラリなので、基本的にJavaScriptのルールに従います。
当然、JavaScriptの動かない環境ではjQueryも動きません。
jQueryプラグイン
このjQueryを使ってWebサイトに様々な機能を持たせる機能拡張をjQueryプラグインと言います。
プラグインと言いますがjQueryの必要な機能を取り出して使うためのjQueryで、これも当然ながらJavaScriptで作られています。
この多くは個人が制作しており、膨大な数が使用フリーで公開されています。
jQueryプラグインは個人が作ったものがほとんどですが、かなり大規模なサイトでもフリーのjQueryプラグインが使われていたりします。
bxSliderを使ってみよう！
では、その中でもメジャーなものの一つbxSliderを実際に使ってみましょう。
以下の記述には、WordPressの仕様上無駄な改行(
)が入っている場合がありますので、適宜に消していただければと思います。
HTMLファイルの用意
適当なHTMLを作成して下さい。
これを「html」の拡張子で保存すれば問題ありません。
画像の用意
まずは画像を用意します。
サイズは何でもいいですが、一応サイズを揃えて500*300pxという事にしてみます。
それでは、画像を配置します。
以下では「img」というフォルダの中に01から04までの番号をつけたjpgファイルを格納する事にしています。
プラグインのダウンロード
まずはbxSliderからプラグインをダウンロードします。
jqueryの読み込み
jqueryサイトからjqueryを配置します。
公式ページを見て下さい。
全部英語なので軽くヒキそうですが、それは我慢するほかありません。
「DownloadjQuery」のボタンを押すと、jQueryの本体をダウンロードしたり読み込むタグを取得できたりします。
ですのでダウンロードする事もできますが、CDN（Contents Delivery Network）というダウンロードせずにインターネット経由で配信するタグも用意されています。
今回はhead内に動作検証の済んでいる
GoogleのCDNを配置しましょう。
ファイルの配置
今回は「jquery.easing.1.3.js」「jquery.bxSlider.js」「jquery.bxslider.css」を使用します。
headに下のように記述し、ファイル構成を同じように整えます。
「jquery.bxslider.css」はcssファイルなのでリンクします。
CSSの記述
今回は「jquery.easing.1.3.js」「jquery.bxSlider.js」を使用します。
headに下のように記述し、ファイル構成を同じように整えます。
scriptの記述
いよいよscriptを記述します。
bxSliderでは細かく設定が用意されているので、後ほど試してみて下さい。
例えばページャーの表示非表示を選択したり、スライドするスピードや停止する時間をコントロールできます。
こんな簡単に設置できました！
こんな便利なjQueryですが、あくまで他人の作ったものを借りているだけだと覚えておきましょう。
でないと、有能な他人の作ったソースコードを自分のページに貼り付けて、あたかも自分がすごいものを作ったかのように錯覚してしまっては誰のためにもなりません。
