ギャラリー系のjQueryプラグイン書きました2
ギャラリー?スライド?どう分類していいのかわからないですが、
それ系のjQueryのプラグインを書きました。
こんなんです。
ソースはここに
動き的には今(2011/09現在)のアップルのサイトの、iMacのページで使われているものを参考にしております。
なので、おこがましくもjquery.appleSlide.jsなどと名付けてみたけど大丈夫だろか(;´Д`)
設置の仕方
jQueryはバージョン1.6.3で検証しとります。
まあ、1.6系なら動くかなー?という感じです。
まず、
head内で必要なjsを読み込みます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.appleSlide.js"></script>
もちろんjQueryは直接DLしたものを使用してもOKです。
デフォルトのイージングの設定がjQuery Easing Pluginを使っているので、これも読み込みます。
htmlはこんな感じで
<div id="slider"> <ul class="canvas"> <li> <img src="images/img1.jpg" /> <h2 class="slideTxt txt1-1" data-speed="500" data-mag="400"><img src="images/txt1.png" alt="" /></h2> <p class="slideTxt txt1-2" data-speed="1000" data-mag="400"> //テキスト等 </p> </li> <li> <img src="images/img2.jpg" /> <h2 class="slideTxt txt2-1" data-speed="500" data-mag="200"><img src="images/txt2.png" alt="" /></h2> <p class="slideTxt txt2-2" data-speed="1000" data-mag="400"> //テキスト等 </p> </li> <li> <img src="images/img3.jpg" /> <h2 class="slideTxt txt3-1" data-speed="500" data-mag="200"><img src="images/txt3.png" alt="" /></h2> <p class="slideTxt txt3-2" data-speed="1000" data-mag="400"> //テキスト等 </p> </li> </ul> <ul class="control"> <li>1</li> <li>2</li> <li>3</li> </ul> </div>
必須条件
必ず存在しないといけないのは、メソッドを実行するセレクタ(この場合だと #slider")内に、
.canvasクラスを持つリストと、.controlクラスを持つリスト。
.canvasのリストには、スライドする画像を置きます。
.controlのリストには、サンプルにあるようなポッチや、サムネールを置きます。
.control内のリストに関しては、現在の画像の位置に、.currentクラスが付きます。
そのクラスにcssを当てて見た目の制御を行ってください。
画像の上に遅れて表示させたい要素がある場合には、
.slideTxtクラスを持つ要素を配置します。
初期配置のcssは、position:absolute;で、位置はtopとかleftではなく、margin-leftとmargin-topで制御してください。
そして、.slideTxtを持つ要素毎に、パラメータの属性を設定します。
- data-speed属性 - 遅れて表示される要素が現れるスピード。(ミリ秒で指定
- data-mag属性 - 遅れて表示される要素があらかじめ移動する距離。(ピクセルで指定
わかりにくいですが、いろいろ設定してみて調整してください。
ちなみにクラスとか属性は、オプションで変更できます。
実行
こう!
<script> $(function(){ $('#slider').appleSlide(); }); </script>
オプション指定する場合はこう!
<script> $(function(){ $('#slider').appleSlide({ speed:500, interval:3000 }); }); </script>
オプション
- speed - スライドするスピード(ミリ秒
- interval - スライドからスライドまでのインターバル(ミリ秒
- easing - スライドのイージング
- jsEasing - modeオプションがtrue時の、遅れてくる要素のイージング
- cssEasing - modeオプションがfalse時の、遅れてくる要素のイージング(css3のeasing設定。cubic-bezierでの指定もできると思います
- curClass - 現在の表示されてる画像の位置を表すクラス。.canvasのliと、.controlのliに付きます
- canvasClass - デフォルトはcanvas
- controlClass - デフォルトはcontrol
- txtClass - デフォルトはslideTxt
- speedAttr - デフォルトはdata-speed
- magAttr - デフォルトはdata-mag
- txtDefSpeed - slideTxtに、data-speedを指定しなかった場合のデフォルト値
- txtDefMag - slideTxtに、data-magを指定しなかった場合のデフォルト値
- mode - jsモードとcssモードの切り替え。falseにすると、jQueryの.animateメソッドではなく、css3でアニメーションします。そのかわりieとかで動きません。
検証ブラウザ
- chrome13
- firefox6
- safari5
- opera11
- ie9,ie6(xpモード)
すべてwin7 64bit。
バグとか使用に関して
例によって、スクリプト自体のご使用は商用とかも自由ですが、このプラグインを使用したことによって被った、いかなる被害についても、 一切の責任を負いかねます。 それを踏まえてご使用ください。
バグは、ご指摘いただければなるべく早急に対応したいと思います。