Foundationのスライダーをサムネイル付きにする方法
スポンサーリンク
Foundationは、CSSフレームワークの一つです。すっかりBootstrapに押されていますが、FoundationはjQuery的な機能が充実しているので、最近ちょいちょい導入しています。
で、そのFoundationの機能の一つである、「Orbit Slider」というスライダー機能。
2014/8/26更新：どういうわけか、Orbitは「非推奨」となりました！今後はサポート外、外部スライダーを使うべしとのことです。うーん、残念。
これはキャプチャなので動きません。動くのはこちら。
今回、それをサムネイル付きにしたのでメモしておきます。
もくじ
1. 基本のOrbit Sliderの記述のしかた
Foundationの基本機能にあるスライダーは、普通のスライダーのjQueryプラグインなどの書き方とほぼ同じで、リストタグの中に画像を入れます。
あとは、ulタグにdata-orbitを入れておくだけでOK。
</pre> <ul data-orbit=""> <li><img src="photo1.jpg" alt="" /></li> <li><img src="photo2.jpg" alt="" /></li> <li><img src="photo3.jpg" alt="" /></li> </ul> <pre>
キャプションも簡単につけられますし、自動で全枚数や次の画像に切り替わるタイマーなどが出るので、既にこれだけでも便利。 詳しくはFoundationのサイトへどうぞ。
Orbit – Foundation Docs
2. サムネイルのコーディング
Foundationの説明ではサムネイルの記述方法はありませんが、「Deep Linking」という項目での解説がヒントになります。
- 各スライドのリストにdata-orbit-slideという属性をつける
- リンクにはdata-orbit-linkという属性をつける
このDeep Linkingではテキストのスライダーのコードしかないのですが、この指定の属性を付けると、ちょっとサムネイル風になるっぽいことが伺えます。
そんなわけで、これを元に作ってみました。
</pre> <div class="orbit-container"> <ul data-orbit=""><!--スライダー本体--> <li data-orbit-slide="slide1"><img src="photo1.jpg" alt="" /></li> <li data-orbit-slide="slide2"><img src="photo2.jpg" alt="" /></li> <li data-orbit-slide="slide3"><img src="photo3.jpg" alt="" /></li> </ul> <ul class="small-block-grid-4"><!--サムネイル--> <li><a data-orbit-link="slide1"><img src="photo1.jpg" alt="" /></a></li> <li><a data-orbit-link="slide2"><img src="photo2.jpg" alt="" /></a></li> <li><a data-orbit-link="slide2"><img src="photo3.jpg" alt="" /></a></li> </ul> </div> <pre>
7～１１行目がサムネイルの表示をさせているコードですが、そのulのクラスに、Block Gridを使っているのがミソです。
Block Grid – Foundaion
1行中に表示させたいサムネイルの数を変えたい場合は、**-block-grid-*の数字部分を変えます。
例えば、上記コードではsmall-block-grid-4としているので、全ての画面サイズにおいて、1行あたり4枚のサムネイルが表示されることになります。
3. スライドのカスタマイズ
FoundationのOrbit Sliderは、デフォルトでは「自動切換えタイマー」「ビュレット（画像下の丸いやつ）あり」「画像の切り替えタイプ：スライド」というように、仕様が固定されています。これらはカスタマイズが可能です。
サムネイルがある場合は、ビュレットなんかは要りませんしね。
3-1. スクリプトを読み込む
スライドの挙動をカスタマイズする場合は、新たにスクリプトを読み込む必要があります。 下のスクリプト読み込みコードの中の、上２つは標準のFoundationの機能を使う場合のスクリプトの読み込みです。それに3行目のスクリプトを追加します。
<script src="js/vendor/jquery.js"></script><script src="js/foundation/foundation.js"></script><script src="js/foundation/foundation.orbit.js"></script>
これらは、</body>の直前などに記述してファイルを読み込みます。
WordPressユーザーなら、wp_enqueque_scriptで呼び出しましょう（当然ですが、このファイルが既にテーマ内にあることが前提）。
3-2. スライドのulに属性を追加する
次に、カスタマイズを加えたい内容として、ulにdata-options属性を追加します。
例えば、「ビュレットなし」「自動切換えなし」にする場合は、data-options="bullets:false; timer:false;をスライダー本体部分のulに属性を加えます。
</pre> <ul data-orbit="" data-options="bullets:false; timer:false;"><!--スライダー本体--> <li data-orbit-slide="slide1"><img src="photo1.jpg" alt="" /></li> <li data-orbit-slide="slide2"><img src="photo2.jpg" alt="" /></li> <li data-orbit-slide="slide3"><img src="photo3.jpg" alt="" /></li> </ul> <pre>
ここでは割愛しますが、アニメーションを「フェイド」にしたり、切り替えスピードを変えたり、かなり色々出来るようになっています。詳しくは以下からどうぞ。
Orbit Advanced – Foundation
4. まとめ
機能としては、やはりスライダー専用のjQueryプラグインのFlexslider2等に比べると、若干面倒ですし、サムネイルのカルーセル化に難があります（自分でjQueryを書けばいいんでしょうけど）。 とは言え、高機能を求めないのであれば、これで十分です。
何より、基本機能はFoundationのjQueryに入っているので、スクリプトの読み込み回数が減るのが魅力です。
