寺子屋未満

[glider.js]
http://www.missingmethod.com/projects/glider.html
紙芝居のようなスライド表示を行うJavaScriptライブラリです。

前回、基本的なスライド表示ができるようになったので
今回はGliderオブジェクトで使用できるメソッドについて調べていきます。

[Gliderオブジェクト]
var my_glider = new Glider('[スライドID]');

◆指定スライドを表示
指定スライドを表示する場合、ID[controls]内にリンクを用意し、
リンクのアンカーにスライド表示する要素IDを指定すればOKです。
<a href="#section1">Section 1</a>
このときglider.js内部でmoveToメソッドがよばれています。
my_glider.moveTo(element, container, options);
—–
element：アンカーで指定したスライドid
container：要素ID[scroller]のオブジェクト（スライド表示部）
options：スライドする時間間隔
—–
これらの引数が内部で自動的に設定されています。

◆前のスライド・次のスライドを表示
Gliderオブジェクトのメソッドで、前のスライド・次のスライドを表示させることができます。
[前のスライドを表示]
my_glider.previous();
[次のスライドを表示]
my_glider.next();

リンクのOnClickイベント発生時に、上記メソッドがよばれるように設定しておけば
「前へ」「次へ」の動きを実装できます。
[使用例]
<a href="#" onclick="my_glider.previous();return false;"><< 前へ</a>
<a href="#" onclick="my_glider.next();return false;">次へ >></a>

◆スライド自動開始
特に設定を行わなければ、このスライドショーは
リンクを押したときにしか動作しません。
HTMLのロードと同時にスライドを開始させるには、
JavaScriptのタイマー機能を使います。
my_glider.start();

start()メソッドを呼び出すと、glider.js内部でtimerオブジェクトが使用され
一定の間隔で自動的にスライドがきりかわります。

◆サンプルです
前回と同じ写真スライドに、前へ・次へリンクをつけ、
ロード時には自動スライドを行うよう設定しました。
Terakoya Work – Glider

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

※ID[controls]内のリンクをクリックし指定スライドを表示させると、
内部でClick時にstop()メソッドが呼び出されてしまうため、
自動表示はストップしてしまいます。
※ループするスライドではないので、最後のスライドから最初のスライドへ
いくときの動きは若干不自然かもしれないです。

次回はGliderオブジェクト生成時のオプション引数についてです。

[glider.js]
http://www.missingmethod.com/projects/glider.html
紙芝居のようなスライド表示を行うJavaScriptライブラリです。
写真だけでなく、Flashコンテンツなども紙芝居表示することができます。

サンプルを見たところ、かなり使える幅が広そうです。
まずは画像で挑戦したいと思います。

[glider.jsのダウンロード]
glider.jsページのDounLoad[Visit the project page to download or check out the source via SVN.]
をクリックすると、GoogleCodeのダウンロードページへジャンプします。
SVNから取得することもできますが、zip形式で取得できるので、
You can also download a zipped version [here.]
をクリックし、圧縮ファイルをダウンロードします。

サンプルhtml、JavaScriptファイル、CSSファイルが同胞されています。
サンプル以外を適当な場所へ配置し、HTMLで宣言しておきます。
<link rel="stylesheet" href="xxx/stylesheets/glider.css" type="text/css" />
<script src="xxx/javascripts/prototype.js" type="text/javascript"></script>
<script src="xxx/javascripts/effects.js" type="text/javascript"></script>
<script src="xxx/javascripts/glider.js" type="text/javascript"></script>

[javascripts]フォルダ内をみるとわかるのですが、
glider.jsを表示するには、prototype.jsが必要となります。
既に、prototype.jsを取り込んでいる場合は、このファイルは不要となります。
また、scriptaculous.jsの[effects.js]も必要となります。
こちらも、既に取り込んでいる場合は新しく設定する必要はありません。
もとからあるファイルの場所を指定すればOK。

[基本的なスライドの設定]
HTMLにスライド表示用の設定を行い、
Scriptを実行させることになります。

HTMLの設定が少し長くなるので、続きは次回とします。

[script.aculo.us Reflector]
http://mir.aculo.us/2006/4/27/like-reflections-try-the-reflector
（サンプル）http://mir.aculo.us/stuff/reflector/reflector.html
prototype.jsとscript.aculo.usを使用して、
画像に鏡面効果（鏡に映ったように見せる効果）を与えるスクリプトです。

[必要なJavaScriptソースの取得]
◆scriptaculous.jsの設定
[script.aculo.us]
http://script.aculo.us/
get it already![Downloads page]をクリックし、ダウンロード画面へ。
current vertion[scriptaculous-js-1.7.0.zip]をダウンロードします。
（拡張子、「.tar.gz」「tar.bz2」のファイルもありますので、
環境に合わせてダウンロードします。）
※インストール方法などについては[Getting Started]に記載されています。

ダウンロードすると、サンプルHTMLやJavaScriptのソースが梱包されています。
srcフォルダに、さまざまなエフェクト用のJavaScriptソースファイルが、
libフォルダに、必要となるフレームワークprototype.jsが含まれています。
（今回の鏡面効果で実際に使用されるsrcのソースは
scriptaculous.jsとeffects.js・builder.jsのようです。）

◇prototype.jsを単独でダウンロードする場合
今回は同胞されているので必要ありませんが、
prototype.jsを単独でダウンロードする場合は以下のサイトから行います。

[prototype.js]
http://www.prototypejs.org/
DownLoadページの、[Download the latest stable version―1.5.1.1]をクリックし
prototype.jsをダウンロードします。
（firefoxでは、右クリック「名前をつけてリンク先を保存」でソースを取得します。）

[HTMLソース上の設定]
ヘッダに宣言するJavaScriptファイルは以下の2ファイルになります。
script.aculo.usに含まれているその他のJavaScriptファイルは、
効果に応じてscriptaculous.js内部から使用されます。
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>

[鏡面効果JavaScriptコード]
以下のコードを追加するにより、鏡面効果を設定することができます。

<script type="text/javascript">
var Reflector = {
  reflect: function(element) {
    element = $(element);
    options = ({
      amount: 1/3,
      opacity: 1/3
    }).merge(arguments[1] || {});

    var p = element.parentNode, n = element.nextSibling;
    var d = 1.0/(element.height*options.amount);

    (element.height*options.amount).times( function(line) {
      var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
        [Builder.node('img',{src:element.src,
          style:'margin-top:-'+(element.height-line-1)+'px'
        })]);
      p.insertBefore(h,n);
      $(h).setOpacity((1-d*line)*options.opacity);
    });
  }
}
</script>

このコードの部分を適用したいHTMLに記述しても構いませんし、
外部ファイル化して読み込んでもOKです。
外部ファイル化する場合、
prototype.jsとscriptaculous.jsを先に読み込むようにします。

[HTMLソース上の設定]
鏡面効果を出したい画像のimgタグにIDを付与し、
以下のスクリプトを実行させます。
Reflector.reflect('[imgタグに指定したid]');
スクリプトはwindow.onload時のイベントとして定義するか、
imgタグより後にスクリプトを記述すればOKです。

[サンプル]
今回もZorgより。Lotus　Photo by sige
Sampleはこちら。

この効果はかなりカッコイイですね。
次回はソースを解析しつつ、オプション効果について少し調べます。

[Slided.js]
http://www.netzgesta.de/slided/

画像を映写機のスライドのような枠で装飾するスクリプトです。
今回はオプションクラスのうち、色指定を行えるクラスについて解説します。

今回もこちらの写真を使います。（季節はずれですが。）

<img src=".../images/xxxxx.jpg" alt="sample" class="slided"/>

【ibgcolor】
映写機風スライド部分の色を6桁のカラーコードで指定します。
デフォルトは＃FFFFFFです。
（ただし、IEの場合はデフォルト設定のままだと影部分が透過されます。）

[ibgcolorEEFFCC■]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ibgcolorCCFF99"/>

【igradient】
ibgcolorを設定している場合にグラデーションカラーを指定できます。
デフォルトはグラデーションなしです。
[ibgcolorEEFFCC■ igradientFFDDEE■ ]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ibgcolorCCFF99 igradientFFDDEE"/>

【vertical】
通常は左上から右下へグラデーション効果が現れますが、
verticalを指定すると縦方向のグラデーションとなります。
[ibgcolorEEFFCC■ igradientFFDDEE■ vertical]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ibgcolorCCFF99 igradientFFDDEE vertical"/>

【horizontal】
通常は左上から右下へグラデーション効果が現れますが、
horizontalを指定すると横方向のグラデーションとなります。
[ibgcolorEEFFCC■ igradientFFDDEE■ horizontal]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ibgcolorCCFF99 igradientFFDDEE horizontal"/>

色の効果をうまく取り入れると、
うるさくならない程度に画像表示ができそうです。