スマートなスライド表示が出来るjQueryプラグイン「simpleSli.de」

簡単に（？）スライドショーが作れるプラグイン。
自分的に本当に簡単だったのかというと果たして疑問ではある・・・。
とりあえず動いた事は動いたので100％理解はしてませんが紹介。
需要があるか知りませんが、恒例のデモも一応。

ダウンロード

サイトに飛んでサクっとダウンロード。
軽量版もありますが、自分は通常版の方を使いました。

インストール

とりあえずさくっとHTML側に読ませましょう。
「init.js」の中身については完全に蛇足ではあるので一番最後に書きました。
設定変更用のファイルです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<script type="text/javascript" src="simpleSlide.js"></script>
<script type="text/javascript" src="init.js"></script>

スライド部分の記述

simpleSlide-windowとsimpleSlide-trayとsimpleSlide-slideがミソです。
とりあえずwindowは領域。trayは入れ物。slideは中身と覚えておいて下さい。
relについては固有名とありますが、違う名前は付けないで下さい。
同じsimpleSlide-windowに属するものには同じrelの値を与えて下さい。
例えばsimpleSlide-windowのrelの値が「image」ならtrayもslideも「image」です。

<div class="simpleSlide-window" rel="固有名">
    <div class="simpleSlide-tray" rel="固有名">
        <div class="simpleSlide-slide" rel="固有名">
        </div>
    </div>
</div>

スライド操作部分

スライドを操作する為のボタンを作成する事ができます。
言わずもがな、右と左の操作ボタンです。
class名は変更しないで下さい。
relの値は動かしたいスライドと同じ値を与えて下さい。

<div class="left-button" rel="固有名"></div>
<div class="right-button" rel="固有名"></div>

ステータスナビゲーション

現在何枚目にいるかをナビゲーション出来ます。
class名は変更しないで下さい。
relの値は動かしたいスライドと同じ値を与えて下さい。

<div class="simpleSlideStatus-tray" rel="固有名">
<div class="simpleSlideStatus-window" rel="固有名"></div>
</div>

ちなみにこの要素については関係を逆にしても動作します。

<div class="simpleSlideStatus-window" rel="固有名">
<div class="simpleSlideStatus-tray" rel="固有名"></div>
</div>

設定

以下の値を変えてあげることで、ステータスバーの色や長さ。
スライドの表示速度を変更することができます。

simpleSlide({
    'set_speed': 300,
    'status_width': 20,
    'status_color_outside': '#aaa',
    'status_color_inside': '#fff',
    'callback': function() {
        /* function code */
    }
});

操作

スライドを操作することも可能です。
relの値は動かしたいスライドと同じ値を与えて下さい。
altは何枚目のスライドに飛ぶかを指定します。
スライドの番号は上から順番に勝手に計算されます。
リンク要素ではないのでjump-toクラスを装飾してあげると分かりやすいです。

<div class="jump-to" rel="固有名" alt="スライドの番号"></div>

こんな感じに。

.jump-to {
	cursor:pointer;
	text-decoration:underline;
}

オート機能

自動でスライドを切り替えることも可能です。
relの値は動かしたいスライドと同じ値を与えて下さい。

<div class="auto-slider" rel="固有名"></div>

但し以下のスクリプトの追加記述が必要です。

$('.auto-slider').each( function() {
	var related_group = $(this).attr('rel');
	clearInterval($.autoslide);
	$.autoslide = setInterval("simpleSlideAction('.right-button', " + related_group + ");", 4000);
});

おまけ　「init.js」

最後になりましたが、冒頭で読ませた「init.js」の中身です。
デモのようなサンプルの場合は以下のような設定で行っています。
スライドの範囲内にマウスが入った場合表示、出たら非表示というような。
これはプラグインと全然関係ないので最後に記述しました。
またオート機能はcallback部分に含めてしまうのがスマートですかね。
もっと良いやり方はたくさんありそうですが・・・。

$(document).ready( function() {
	$('.slideshow').live('mouseover mouseout',
		function(event) {
			if(event.type == 'mouseover'){
				$(this).children('.left-button, .right-button').stop(true, true).fadeIn();
			}
			else {
				$(this).children('.left-button, .right-button').stop(true, true).fadeOut();
			}
		}
	);
	$('#setting_up').ready( function() {
		simpleSlide({
			'set_speed': 300,
			'status_width': 20,
			'status_color_outside': '#333',
			'status_color_inside': '#c6ff00',
			'callback': function() {
				$('.auto-slider').each( function() {
					var related_group = $(this).attr('rel');
					clearInterval($.autoslide);
					$.autoslide = setInterval("simpleSlideAction('.right-button', " + related_group + ");", 4000);
				});
			}
		});
	});

});

お疲れ様でした

余計な装飾がたくさん付いていたのと、デモがDOMで読まれていた為難儀でした。
もっとスクリプト読んだだけで「フフン、容易いわい」とかいって読解できるようになりたいです-;
デモページ

simplesli.de
[JS]シンプルだけどフレキシブルなコンテンツスライダーの軽量スクリプト -simpleSli.de

追記2011-03-16：オート機能+スライド機能

コメントでお問い合わせがあったので追記。
オート機能とスライド機能を同時に使用することも勿論可能です。
参考までにHTMLを記載してみました。
肝心なのはrel=”"で指定される固有名が統一されているかどうかなので、
そこの部分を間違えていなければ問題なく動作すると思います。
ちなみにdivクラス名slideshowは自分で勝手に付けたスライドを包括する為のクラスなので、
動作には関係ありません。

<div class="slideshow">
    <div class="left-button left" rel="固有名"></div>
    <div class="simpleSlide-window left" rel="固有名">
        <div class="simpleSlide-tray" rel="固有名">
            <div class="simpleSlide-slide" rel="固有名">
            </div>
        </div>
    </div>
    <div class="right-button left" rel="固有名"></div>
</div>
<div class="auto-slider" rel="固有名"></div>
<div class="simpleSlideStatus-tray" rel="固有名"><div class="simpleSlideStatus-window" rel="固有名"></div></div>

と言った感じで、基本的にはスライド要素と両方併記すれば可能です。

Similar Posts:

• jQueryでさくっと出来るスライドショー「Slide Scale」
• スポットライトプラグイン「jQuery Spotlight」
• コンテンツをサイドバーとして引き出せる「Jquery Side Content」
• 画像がシャッフル表示できる！「jSquares プラグイン」
• 画像をスムースに切り替える「FeatureCarouselプラグイン」

Check