2011年6月 :: Archives

画像の読み込みと生成を行い、ローディング完了またはタイムアウトを確認してからコールバックに設定した処理を行う。 【 実行方法 】

$("element").imgloader(options);

【 オプション 】 imglist: (Array) 画像のsrcに指定するパスを配列形式で指定。 callback: (function) コールバック処理を関数形式で指定。 timeout: (Number) タイムアウトをミリ秒で指定。省略時はタイムアウトしない。 【 例 】

	var options = {
		imglist: [
			"photo/0.jpg",
			"photo/1.jpg",
			"photo/2.jpg",
			"photo/3.jpg"
		],
		width: 1200,
		height: 896,
		callback: function() {
			// コールバック処理
		}
	}
	
	// loader
	$("#imgContainer").imgloader(options);


// HTML
	

デモはこちらから

ダウンロードはこちらから

リサイズイベント発生時に要素内の画像サイズをウィンドウサイズに合わせて変更する。
最小サイズを指定しておけば、それより小さくはならない。

【 実行方法 】

$("element").fitter(options);

【 オプション 】
width: 画像の初期横幅
height: 画像の初期縦幅
minWidth: 最小横幅
minHeight: 最小縦幅
selector: フィッティングさせる要素を指定する。初期値は"img"。

デモはこちらから

ダウンロードはこちらから

フローティングなナビゲーションを作るjQueryプラグイン

↑に位置固定(position: fixed)の機能を追加した。

もちろん、IE6にも対応。

floater.js

サンプル デモ

オプションや使い方などは前記事を参照ください。

fixedオプションを追加。

ナビゲーションなどのコンテンツをスクロールに追従させ、画面の上下に接着させるjQueryプラグイン。

どこかで見たような気がするのだが、どこで見たか思い出せない＆探してもすぐ出てこないので、作ってみた。

floater.js

サンプル デモ

使い方は簡単。
よくある感じで、動かしたい要素でfloaterメソッドを実行する。

	$(element).floater();

オプションは以下の通り。

• marginTop: 上の余白
• marginBottom: 下の余白
• agility: 0～1。0はナビが通り過ぎるまで待つ。1はナビの末端が出るとすぐ動きだす。
• speed: アニメーションにかける時間
• easing: イージング
• fixed: trueでposition: fixedに切り替え。初期値はfalse。

オプションを適用すると、こんな感じ。

	$("nav").floater({
		marginTop: 60,
		marginBottom: 80,
		wait: 0.75,
		speed: 800,
		easing: "easeInQuad"
	});

追記： 2012/04/04 オプションを追加しました。

最前面(末尾)の要素をfadeOutさせたのち、最背面(先頭)へ移動させ、show()している。その繰り返し。
CSSは特に指定していないので、同じ場所で切り替える場合は、position: absoluteなどで重ねておく必要あり。

【 実行方法 】

$(parent-element).fadechanger({ selector: child-element });

【 オプション 】
speed: 切り替えにかける時間をミリ秒で指定。初期値は2000。
wait: 次の切替までの待ち時間をミリ秒で指定。初期値は2000。
selector: 要素内のどの子要素を切り替えるかを指定する。省略した場合は、すべての子要素が対象となる。
(例) { selector: ".opened" }とした場合は、openedというクラス名を持った子要素のみが対象となる。
loop: 切替のループ回数を数値で指定。初期値は"infinite"（無限）。

デモ（無限繰り返し）

デモ（ループしない）

ダウンロードはこちらから