【jQuery】スライドコンテンツをjQueryのプラグインで作ってみた！！

jquery

以前、作成したjQueryの簡易画像ビュアーのコンテンツバージョンを作成しました。

実行結果

今回はプラグインとして作成してプロパティで幅と高さとスピードとイージングを変更できるようにしました。

jqueryの部分はちょっと変更があるけど、前回とほぼ同じ。
しいて言えば、変更できるようにしただけ

$("#container").slideviewer({
initX:600,　　　　　　　　　　　　　　//コンテンツの幅と移動値の設定　共通で使用
initY:400,　 　　　　　　　　　　　　//コンテンツの高さを設定　
speed:2000,　　 　　　　　　　　　//スピードを設定
eventparam:"mouseover"　　　//イベントの種類を設定　clickなど
}
);

プラグインの説明は自分でもちゃんと理解していないので後々、別で解説しようと思ってる。

// JavaScript Document
(function($){
$.fn.extend({
slideviewer:function(options){
	options=$.extend({
		easingparam:"easeInOutExpo",
		speed:1000,
		initX:450,
		initY:450,
		eventparam:"click"
		},options);
		return this.each(function(){
		
		var $movecontainer=$(this).children(":first");
		var $navi=$("#navigation").children();
		
		$movecontainer.children().css({float:"left",display:"inline",width:options.initX,height:options.initY});
		
		$navi.bind(options.eventparam,function(){
			var i=$(this).index();
			
			$movecontainer.stop().animate({left:-i*options.initX},{duration:options.speed,easing:options.easingparam});
			
			});
			});
	}
});
})(jQuery);