[JS]超軽量、設置も簡単、オプションも豊富なスライドショーのスクリプト -Orbit

実装も簡単で、オプションも豊富に揃った、使い勝手のよい画像スライドショー用のjQueryのプラグインを紹介します。
約4KBと超軽量なのもいいですね。

Orbit jQuery Image Slider Plugin
デモページ

[ad#ad-2]

スライドの操作は3つ用意されています。

• 左右の矢印
• 下のビュレット
• 右上のオートプレイ

右上のオートプレイは状況も表示します。

Orbitの実装

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

スタイルシートも外部ファイルとして指定します。

<link rel="stylesheet" href="css/orbit.css">

HTML

画像のみを配置したシンプルなスライドのHTMLです。

<div id="featured"> 
     <img src="overflow.jpg" alt="Overflow: Hidden No More" />
     <img src="captions.jpg"  alt="HTML Captions" />
     <img src="features.jpg" alt="and more features" />
</div>

JavaScript

画像を内包する要素（#featured）をjQueryのセレクタで指定します。

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>

スクリプトのオプション

オプションでは、画像のキャプションやビュレットのナビゲーションをはじめ、さまざまな設定が簡単にできます。

画像のキャプション

画像ごとに異なるキャプションを設定できます。

<div id="featured"> 
     <img src="overflow.jpg" alt="Overflow: Hidden No More" />
     <img src="captions.jpg"  alt="HTML Captions" data-caption="#htmlCaption" />
     <img src="features.jpg" alt="and more features" />
</div>
<!-- Captions for Orbit -->
<span class="orbit-caption" id="htmlCaption">I'm A Badass Caption</span>

1. キャプションをspan要素で配置し、classに「orbit-caption」、画像に対応させるidを記述します。
2. 対応する画像のdata-caption属性に「#」を加えて記述します。

キャプションはアニメーションにも対応しており、captionAnimationパラメータでfade, slideOpen, noneを設定できます。

ビュレットのナビゲーション

デモの下に配置されたビュレットのナビゲーションの設置方法です。
「 bullets: true」を加えるだけです。

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit({
              bullets: true
         });
     });
</script>

Orbitの全パラメータ

他にもアニメーションのエフェクト、スピードなど、簡単に設定ができます。

$('#featured').orbit({
     animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
     animationSpeed: 800,                // how fast animtions are
     timer: true, 			 // true or false to have the timer
     advanceSpeed: 4000, 		 // if timer is enabled, time between transitions 
     pauseOnHover: false, 		 // if you hover pauses the slider
     startClockOnMouseOut: false, 	 // if clock should start on MouseOut
     startClockOnMouseOutAfter: 1000, 	 // how long after MouseOut should the timer start again
     directionalNav: true, 		 // manual advancing directional navs
     captions: true, 			 // do you want captions?
     captionAnimation: 'fade', 		 // fade, slideOpen, none
     captionAnimationSpeed: 800, 	 // if so how quickly should they animate in
     bullets: false,			 // true or false to activate the bullet navigation
     bulletThumbs: false,		 // thumbnails for the bullets
     bulletThumbLocation: '',		 // location from this file where thumbs will be
     afterSlideChange: function(){} 	 // empty function 
});

[ad#ad-2]