ギャラリー？スライド？どう分類していいのかわからないですが、
それ系の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。

バグとか使用に関して

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

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

tag

jQuery

js

プラグイン