画像のスライダープラグインを使ってみよう
次は、画像のスライダーを使ってみましょう。例えば、アマゾンのサイトで横一列に並べられた関連書籍の画像を、スライドで確認できるようなイメージです。ほかにも写真を大量にアップロードするときに確認したり、サイトの商品紹介などにも利用できます。まずこのサイトからプラグインをダウンロードします。
Sudo Slider 1.0.9.zipをダウンロードし、解凍後にjs、css、imagesフォルダをpluginsフォルダにコピーします。
リスト9のように、画像のスライダープラグインとスタイルを読み込みます。
<!--1．jQueryの読み込み--> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <!--2．プラグインの読み込み--> <script type="text/javascript" src="plugins/Sudo Slider 1.0.9/js/jquery.js"></script> <script src="plugins/Sudo Slider 1.0.9/js/jquery.address-1.2.2.min.js" type="text/javascript"></script> <script type="text/javascript" src="plugins/Sudo Slider 1.0.9/js/jquery.sudoSlider.js"></script> <script type='text/javascript' src='plugins/Sudo Slider 1.0.9/js/jquery.simplemodal.js'></script> <!--3．プラグインのスタイルシートの読み込み--> <link href="plugins/Sudo Slider 1.0.9/css/style.css" rel="stylesheet" type="text/css" media="screen" />
画像スライダープラグインは、slider要素に対してsudoSliderメソッドを使用します（リスト10）。
<!--4．スライダープラグインの利用-->
<!--
<script type="text/javascript">
<!--
$(function () {
$("#slider").sudoSlider();
});
});
//-->
</script>
slider要素は、リスト11のようにclassに"slider"を指定し、スライドさせたい画像の数だけli要素を追加し、画像のURLを記述します。
<!--5．スライダープラグインの利用-->
<div id="container" style="position:relative;">
<div id="content">
<div id="slider" class="slider">
<ul>
<li><img src="plugins/Sudo Slider 1.0.9/images/slider_001.jpg" alt="image description" /></li>
<li><img src="plugins/Sudo Slider 1.0.9/images/slider_002.jpg" alt="image description" /></li>
<li><img src="plugins/Sudo Slider 1.0.9/images/slider_003.jpg" alt="image description" /></li>
<li><img src="plugins/Sudo Slider 1.0.9/images/slider_004.jpg" alt="image description" /></li>
<li><img src="plugins/Sudo Slider 1.0.9/images/slider_005.jpg" alt="image description" /></li>
</ul>
</div>
</div>
</div>
画像スライダープラグイン使用時の結果を図5に示します。
また、オプションを指定することによって、スライドボタンの種類や垂直・水平といったスライド方向の変更ができます。リスト12、リスト13には、垂直方向にスライドさせ、スライドの枚数だけボタンを表示させるsliderプラグインオプションを示します。
<script type="text/javascript">
<!--
$(document).ready(function () {
$("#slider").sudoSlider({
vertical: true,
autoheight: false,
numeric: true,
prevNext: false,
startSlide: 2,
numericText: ['スライド1', 'スタートスライド', 'スライド3', 'スライド4', 'ラストスライド']
});
});
//-->
</script>
<div id="container" style="position:relative;">
<div id="content">
<div id="slider" class="slider" style="height:100px;" >
<ul>
<li><img style="height:100px;" src="plugins/Sudo Slider 1.0.9/images/slider_001.jpg" alt="image description" /></li>
<li><img style="height:100px;" src="plugins/Sudo Slider 1.0.9/images/slider_002.jpg" alt="image description" /></li>
<li><img style="height:100px;" src="plugins/Sudo Slider 1.0.9/images/slider_003.jpg" alt="image description" /></li>
<li><img style="height:100px;" src="plugins/Sudo Slider 1.0.9/images/slider_004.jpg" alt="image description" /></li>
<li><img style="height:100px;" src="plugins/Sudo Slider 1.0.9/images/slider_005.jpg" alt="image description" /></li>
</ul>
</div>
</div>
</div>
まず、スライド方向を垂直にするには、リスト12のようにverticalオプションをtrue、autoheightオプションをfalseに設定し、リスト13のように、idにsliderを指定したdiv要素とimg要素のそれぞれに、style属性を指定します。
また、スライド数に応じたボタンを表示するには、リスト12のようにnumericオプションをtrue、prevNextオプションをfalseに設定します。ほかには、startSlideを指定することでスタートするスライドを変更させたり、numericTextを指定することでボタンに表示させるテキストを設定できます。
リスト12、リスト13の実行結果を図6に示します。
画像のZoomプラグインを使ってみよう
次は、画像のZoomプラグインを使ってみます。例えば、辞書のような文字がたくさん並んでいるページで一部分を見やすくしたり、高画質な画像の詳細を拡大して確認する、といった用途が考えられます。
まず、サイトからプラグインをダウンロードします。cloud-zoom.1.0.2.zipというファイルがダウンロードされるので、解凍後にpluginsフォルダにコピーします。そして、jQueryプラグインとメニュープラグイン関連のファイルを読み込みます（リスト14）。
<!--1．jQueryの読み込み--> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <!--2．プラグインの読み込み--> <script type="text/JavaScript" src="plugins/cloud-zoom.1.0.2/cloud-zoom.1.0.2.js"></script> <!--3．プラグインのスタイルシートの読み込み--> <link href="plugins/cloud-zoom.1.0.2/cloud-zoom.css" rel="stylesheet" type="text/css" />
リスト15に画像のZoomプラグインの使用例を示します。
<!--4．プラグインの指定--> <a href='plugins/cloud-zoom.1.0.2/images/zoom_02.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4"> <img src="plugins/cloud-zoom.1.0.2/images/zoom_02_small.jpg" alt='' title="任意のタイトル表示" /> </a>
Zoomプラグインを利用するには、リスト15内の4のように、サイズの異なる表示させたい画像を2種類用意し、画像のURLを指定します。Zoom後の画像にはclassに'cloud-zoom'を指定し、rel属性で元画像の右端からの相対位置で表示させる位置（X座標、Y座標）を指定します。実際には、ズームしたい箇所を左画面でクリックすると、該当箇所が右画面に拡大表示されます。画像のZoomプラグイン使用時の結果を図7に示します。
