2011年08月22日

jQueryプラグインNivo Sliderのカスタマイズ

jQueryプラグインNivo Sliderのカスタマイズ箇所の備忘録。

【エフェクトの種類】

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft

------------------------------------------------------

Nivo Sliderの詳細設定

JavaScriptで詳細設定が可能。

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //エフェクトの種類
slices:15,
animSpeed:500, //スライドのエフェクトの時間
pauseTime:3000,//スライドの表示の時間
startSlide:0, //初めに表示するスライド番号 (0 index)
directionNav:true, //前後ナビゲーションボタンの表示・非表示
directionNavHide:true, //マウスが画像から外れた時前後ナビゲーションボタンが非表示にする
controlNav:true, //コントロールナビゲーションボタンの表示・非表示
controlNavThumbs:false, //コントロールナビゲーションボタンにサムネイル画像を使う
controlNavThumbsFromRel:false, //imgタグのrelからサムネイル画像のファイル名を取得する
controlNavThumbsSearch: '.jpg', //サムネイル画像の拡張子
controlNavThumbsReplace: '_thumb.jpg', //サムネイル画像の名前の置き換え
keyboardNav:true, //キーボードで前後ナビゲーションする
pauseOnHover:true, //マウスオーバーでスライド停止する
manualAdvance:false, //マニュアルで設定
captionOpacity:0.8, //キャプションの透明度
beforeChange: function(){}, //画像が変わる前に実行するスクリプトを入力
afterChange: function(){}, //画像が変わった後に実行するスクリプトを入力
slideshowEnd: function(){}, //スライドがすべて終わった後実行するスクリプトを入力
lastSlide: function(){}, //最後の画像が表示された時に実行するスクリプトを入力
afterLoad: function(){} //スライドがロードされた後に実行するスクリプトを入力
});
});
</script>

posted by ITF at 20:47| 奈良 ☁| Comment(0) | チュートリアル | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は90日以上新しい記事の投稿がないブログに表示されております。