maki-o memo

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

ギャラリー系のjQueryプラグイン書きました2

ギャラリー?スライド?どう分類していいのかわからないですが、
それ系のjQueryのプラグインを書きました。

こんなんです。

demo

ソースはここに

github

動き的には今(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。

バグとか使用に関して

例によって、スクリプト自体のご使用は商用とかも自由ですが、このプラグインを使用したことによって被った、いかなる被害についても、 一切の責任を負いかねます。 それを踏まえてご使用ください。

バグは、ご指摘いただければなるべく早急に対応したいと思います。


プロフィール

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

Tomokazu Makita

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

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

エントリーリスト

タグ