maki-o memo

制作に関する私的なメモです

選択されているタグ : プラグイン , jQuery

ギャラリー系のjQueryプラグイン書いてみました。

ぼくの日々の業務の中に、「こうゆう動きする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 縦の動きにも対応,若干修正


プロフィール

フロントエンドエンジニア

Tomokazu Makita

名古屋でフリーランスでWeb制作してます。 フロントエンドのことを主にやってます。
a-blog cmsを使用したサイト制作が得意です。
お仕事のご相談随時受付中。

雪山大すき。冬は雪山の合間に仕事します。
財布はいつも吹雪です。

エントリーリスト

タグ