ギャラリー系のjQueryプラグイン書いてみました。
ぼくの日々の業務の中に、「こうゆう動きするjsのプラグイン探して」ってゆう業務があるんですけど、
ぶっちゃけめちゃキライです。
見つかんないし。
なのである日、カッとなって書いてみました。
スクリプトはこんな感じです。
こんなふうにに使います
htmlは、以下のようなものを使います。
<div id="gallery"> <div id="nav"> <div id="navInner"> <ul> <li><a href="#"><img src="images/slideImg1_s.jpg" alt="" width="225" height="40" data-repImg="images/slideImg1.jpg" /></a></li> <li><a href="#"><img src="images/slideImg2_s.jpg" alt="" width="225" height="40" data-repImg="images/slideImg2.jpg" /></a></li> <li><a href="#"><img src="images/slideImg3_s.jpg" alt="" width="225" height="40" data-repImg="images/slideImg3.jpg" /></a></li> </ul> </div> <p id="btnL"><a href="#"><img src="images/btnL.gif" alt="Prev" /></a></p> <p id="btnR"><a href="#"><img src="images/btnR.gif" alt="Next" /></a></p> </div> </div>
注意点としては、サムネールを表示するリストのimgタグに、width属性をちゃんと指定することと、
data-repImg属性(オプションで変更可能)に、置き換えたい画像(大)のパスを指定することです。
jQueryのメソッドとして実行する
$(function(){ $('#gallery').maGallery({ effect :'fade', speed :5000, dataAttr :'data-repImg', bgLink :true, thumbLink :false, slideSpeed :1000, repSpeed :1000, delay :true, easing :'linear' }); });
主なオプションの意味は以下です。
- effect - 画像が切り替わるエフェクト方法を指定します。デフォルトはfadeです。 fade | cross
- speed - スライダーの自動送りの間隔です。
- dataAttr - サムネールの画像に対する大きな画像(置き換えたい画像)のパスを書いておく属性の値を指定します。
- bgLink - trueを指定すると、ギャラリー全面がリンクになります。
- thumbLink - falseを指定すると、サムネールがリンクとして機能せず、センター以外のサムネールを押したときに、押した画像がセンターに移動します。
- slideSpeed - スライダーのアニメーションスピードです。
- repSpeed - 画像切り替えのアニメーションスピードです。
- delay - trueにすると、スライドし終わってから、画像の切り替えをはじめます。
- easing - スライドのイージングを指定できます。jquery.easingプラグインを使えば、多様なイージングを表現できます。 linear | swing
検証ブラウザ
- chrome12
- Firefox5
- Safari5
- IE 9,8,7,6(xpモード 動きが少しあやうい、、、)
- Opera11
すべてwin7 64bit です。
バグとか
ここの処理ありえんでしょ?! とか、他にも何かご指摘などありましたら、twitter等でご指導ご鞭撻いただけるとありがたかったりします。(すぐ対応できるかはわかりませんが
スクリプト自体のご使用は商用とかも自由ですが、このプラグインを使用したことによって被った、いかなる被害についても、 一切の責任を負いかねます。
それを踏まえてご使用ください。
更新履歴
2011-07-08 左右のボタンを押したときの挙動を逆に変更
2011-07-20 縦の動きにも対応,若干修正