panorerプラグイン
最後は、パノラマ画像を表示するpanorerプラグインを使ってみます。このプラグインは例えば風景などのパノラマ画像を固定された表示領域に対して、上下左右に自動的に動かすことができます。このように動きができるので、サイトのトップページなどに適用させてユーザーの注目を集めるといった使い方が考えられます。ほかには、先述のMobilyMapプラグインサンプルのような会社案内のページと組み合わせて、会社へアクセス時の路線図を表示させても面白そうです。下記、サイトからプラグインをダウンロードします。
リンク先のページで先頭にある「jquery.panorer」というタイトルをクリックすると、jquery.panorer.jsというファイルがダウンロードされるので、pluginsフォルダにpanorerというフォルダを作成し、その直下にjquery.panorer.jsをコピーします。また、panorerフォルダ直下にimagesフォルダを作成し、表示させたい画像を配置してください。
リスト5に、panorerプラグインの使用例を示します。路線図を、自動的に左右に移動させるというサンプルです。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>panorerサンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/panorer/jquery.panorer.js"></script>
<!--3.プラグインの設定-->
<script type="text/javascript">
$(function () {
$('#pano').panorer({
'easing': 'swing',
'direction': 'random'
});
});
</script>
</head>
<body>
<h1>panorerサンプル</h1>
<!--4.classの指定-->
<div style="height:300px; width:400px; border: solid medium black;" id="pano">
<!--5.画像の指定-->
<img src="plugins/panorer/images/Marunouchi-line.jpg" alt="路線図（丸の内線）"/></div>
</body>
</html>
panorerプラグインを利用するには、3のようにpanorerメソッドを用い、パラメータを指定します。4では、表示領域の大きさとクラス（id=pano）を指定します。また、5では表示させたい画像を指定しています。
panorerプラグインの主なオプションを表4に示します。
| オプション | 説明 | デフォルト |
| direction | スクロールする方向を指定 /"EW":表示領域の左端を起点に右から左へ移動し、その後左右運動 /"WE":表示領域の右端を起点に左から右へ移動し、その後左右運動 /"SN"：表示領域の上端を起点に上から下へ移動し、その後上下運動 /"NS"：表示領域の下端を起点に下から上へ移動し、その後上下運動 /"round"：表示領域の右端を起点に左→下→右→上を繰り返す /"random"：画像の縦<横の場合、EWまたはWE、縦>横の場合、SNまたはNS |
random |
| initialWait | 最初のアニメーションの開始までの待ち時間を指定（ms） | 1000 |
| duration | アニメーションの間隔（ms） | （画像の幅／0.2） |
| pause | 一画像が最後まで表示された際の一時的な停止時間（ms） | 1000 |
| easing | アニメーションのイージング設定 | swing |
panorerプラグイン使用時の結果を、図9、図10に示します。
まとめ
今回は画像の見せ方をテーマに、画像のスライドショー、画像の円形スライド、パノラマ画像の表示といったjQuery Pluginを取り上げ、解説しました。次回は、要素の角を丸めたり、チェックボックスを装飾をしたりできるスタイルに関するプラグインを取り上げる予定です。
