Glider.jsを使う。(2)

[glider.js]
http://www.missingmethod.com/projects/glider.html
紙芝居のようなスライド表示を行うJavaScriptライブラリです。
写真だけでなく、divタグ内に指定したコンテンツなら全て紙芝居表示できます。

◆基本的なスライドの設定
【HTML】
◇移動用リンク
◇紙芝居表示となる部分
これら二つの要素を、紙芝居表示ブロック内に記述することになります。
<div id="スライドID">
  <div class="controls">
    <a href="#1枚目ブロックのID">1枚目</a> |
    <a href="#2枚目ブロックのID">2枚目</a> |
    <a href="#3枚目ブロックのID">3枚目</a> |
  </div>  
  <div class="scroller">
    <div class="content">
      <div class="section" id="1枚目ブロックのID">
        <!-- ここにコンテンツを記述 -->
      </div>
      <div class="section" id="2枚目ブロックのID">
        <!-- ここにコンテンツを記述 -->
      </div>
      <div class="section" id="3枚目ブロックのID">
        <!-- ここにコンテンツを記述 -->
      </div>
    </div>
  </div>      
</div>

◇移動用リンク
class名は[controls]となります。

◇紙芝居表示となる部分
紙芝居表示部分(外側)のclass名は[scroller]、
紙芝居表示部分(内側)のclass名は[content]、
セクション(一枚ごとのブロック)class名は[section]となっています。

これらはScript上で使用しているので名前の変更はできません。
(名称変更した場合の設定方法までは現在未解析です。)

これらのclass名でglider.cssにデフォルトスタイルが設定されています。
デフォルトのままのCSSだと、デザイン性は少ないので、
CSSの調整が必要となると思います。
構造は単純なので、割と簡単にスタイル調整を行うことができます。

【Script】
スライドIDを引数とした次のScriptを上記HTMLの定義後に記述します。
<script type="text/javascript" charset="utf-8">
  var my_glider = new Glider('[スライドID]');
</script>

(ヘッダでOnLoad時に宣言してもOKです。)
<script type="text/javascript" charset="utf-8">
   window.onload = function() { var my_glider = new Glider('[スライドID]')};
</script>

◆サンプル
Terakoya Work – Glider
Terakoya Work - Glider

(※キャッシュ再生成中の為、SimpleAPIのサムネイルが表示されないようです。)

このスクリプトはCSSやオプション設定がかなり豊富です。
次回は、まず、自動スライドショー指定方法のオプションから
調べていきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください