カールおじさんやニモの画像でスライドショーのデモが見れるNivo Slider。
スライスした画像をパラパラめくってチェンジする効果、インパクトありますよね。
今回、リニューアル中のサイトに使わせて頂いただきました。
jQueryやWordPressのプラグインとして動作します。
Nivo Slider ダウンロード
HTML5 head内に以下を追加
（ソースや画像ファイルのパスは適宜変更してください。）
|
1 2 3 |
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" /> <link media="screen" rel="stylesheet" href="nivo-slider.css" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" charset="utf-8" type="text/javascript"></script> |
JavaScriptの追加
（</body>の前に追加しました。）
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'fade', pauseTime: 6000, controlNav: false }); }); </script> |
画像を読み込む
|
1 2 3 4 5 6 7 |
<article class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <a href="#"><img src="images/01.jpg" /></a> <img src="images/02.jpg" /> <img src="images/03.jpg" /> </div> </article> |
＄(‘#slider’).nivoSlider()のsliderと<div id=”slider”>のsliderを一緒にします。
テーマを変更したい時はtheme-defaultをtheme-barなどとすれば変更できます。
（head内でcssファイルを読み込むのも忘れずに。）
オプションのデフォルト値（jquery.nivo.slider.js 637行目辺り）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
effect: 'random', slices: 15, boxCols: 8, boxRows: 4, animSpeed: 500, pauseTime: 3000, startSlide: 0, directionNav: true, controlNav: true, controlNavThumbs: false, pauseOnHover: true, manualAdvance: false, prevText: 'Prev', nextText: 'Next', randomStart: false, beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){}, lastSlide: function(){}, afterLoad: function(){} |
アニメーションの種類（jquery.nivo.slider.js 350行目辺り）
- sliceDownRight
- sliceDownLeft
- sliceUpRight
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
ライセンスはMIT licenseです。
こういうブログもありました。
- Tumblrのリブログした画像をスライドショーの背景画像として設置 jQueryで
- Flashのように文字を繰り返し表示、jQueryで
- ランダムに文字や画像をパラパラ表示する、jQueryで。
- Parallaxをやってみましたよ、jQueryを使って
- jQueryテストスイート「QUnit」がスタンドアロン化!
人気のあるブログ：
- 新しいgemのアップデート方法（rubygems-update）
- Coda2でscssを使うときのお供にcompassをどうぞ。
- NginxをSSL付きで動かすために設定したこと
- SIM無しiPhone 3Gで初めて脱獄をやってみた
- bashでUTF-8に設定して日本語表示したり使ったり。Emacsでも。
