ぼくの日々の業務の中に、「こうゆう動きするjsのプラグイン探して」ってゆう業務があるんですけど、
ぶっちゃけめちゃキライです。
見つかんないし。

なのである日、カッとなって書いてみました。

demo

スクリプトはこんな感じです。

github

こんなふうにに使います

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 縦の動きにも対応,若干修正

tag

jQuery

js

プラグイン