Skitterで迫力ある効果のスライドショーを作る方法 [ホームページ作成] All About
skitterオプション
使うときは、コメントを外して、使用する。
Skitterのバージョンが古いときのオプションも書いてるので、使用できないオプションもあるかもしれません。
[javascript]
<script type="text/javascript">
$(document).ready(function() {
$(‘.box_skitter_large’).skitter({
theme: ‘clean’, // minimalist,round,default,clean,square
numbers_align: ‘left’, //ナビゲーションの位置 left center right
progressbar: true, //次の画像を表示するまでのバーの設定
show_randomly: true, //画像をランダム表示 使用しないfalse
velocity: 5, //Velocity of animation（アニメーション速度）
interval: 2000,//Interval between transitions（推移の間隔）
navigation: true,//Navigation display（ナビゲーション表示）
numbers: true,//（ナビゲーションが番号で表示）
thumbs: false,//（ナビゲーションがサムネールで表示）
dots: false,//（ナビゲーションがドットで表示）
hideTools: true//ロールオーバーでツール表示
/*
Skitter Theme:スライド・ショーのテーマを選びます
Animation type：スライド・ショーの効果（アニメーションの効果）を選びます
Navigation type：ナビゲーションのタイプです。（なし、ドット、数字、サムネイルのどれか）
width px：スライド・ショーの横幅
height px：スライド・ショーの高さ
background：背景の色
crop image：画像を指定した大きさで切り取るかどうか
velocity：アニメーションの強さ
interval：画像が切り替わるタイミング（ミリ秒単位 1000なら1秒で切り替わる）
navigation：ナビゲーションの有無
numbers_align：数字をどこに表示するか（left,center,right）
label：ラベルを表示るかどうか
labelAnimation：ラベルのアニメーション効果の有無
width_label：ラベルの幅（ピクセル）
easing_default：アニメーションの進み具合（詳しくは→Easing function
animateNumberOut：マウスアウトの数字の色と背景{backgroundColor:’#000′, color:’#ccc’}
animateNumberOver：マウスホバーの数字の色と背景
animateNumberActive：数字にリンクが貼られいる場合の色と背景
hideTools：ツールを非表示にするかどうか
fullscreen：常時フルスクリーン表示にするかどうか
show_randomly：画像をランダムに表示するかどうか
enable_navigation_keys：ナビゲーションキーを許可するかどうか（？）
controls：制御ボタン（矢印）の表示、非表示
controls_position：制御ボタン（矢印）の位置（center, leftTop, rightTop, leftBottom, rightBottom）
focus：表示基準の有無
focus_position：表示基準の場所（center, leftTop, rightTop, leftBottom, rightBottom）
preview：プレビューするかどうか
stop_over：マウスホバーでスライド・ショーを止めるかどうか
with_animations：アニメーション効果を加える（’paralell’, ‘glassCube’, ‘swapBars’）
auto_play：自動的にスライド・ショーを始めるかどうか
*/
});
});
</script>
[/javascript]