写真なび：サンプルコード | − 具体的なコード例はこちら |
| ||||||||||||||||||
|
■ 写真ナビ：サンプルHTML
下記のようにHTMLのみで実現できます。
【写真ナビ：サンプルコード】 <html> <head> <style type="text/css"> .flip { position:absolute; background:white; } </style> </head> <body> <script language="javascript" src="keynavi_ja.js"></script> <script language="javascript" src="keynavi_tools.js"></script> <script language="javascript" src="keynavi_flip.js"></script> <div class="flip" id="fl_ez_3"><img src="gazo3.jpg"></div> <div class="flip" id="fl_ez_2"><img src="gazo2.jpg"></div> <div class="flip" id="fl_ez_1"><img src="gazo1.jpg"></div> <div class="flip" id="fl_ez_0"><img src="gazo0.jpg"></div> 。。。。。 </body> </html> 上のように 「position:absolute」を指定したレイヤー内に画像を配置します。 そして見せたい順番に「fl_ez_番号」という形式でIDを降っていきます。
番号が逆順になっています。
HTMLでは後ろに置かれたレイヤーの方が手前に表示される為です。
サンプル実行例については サンプル６：写真なび [Shift-I] を参考。 ID指定の形式を変えたい場合は「FL_EZ_PREFIX」を変更して下さい。
■ 各種カスタマイズ用定数
以下の変数の値を変更します。
【写真ナビ：カスタマイズ用定数】
透明度の変化を滑らかにしたい場合は「FL_MSEC1」を小さめに 「FL_STEPS」を大きめにします。 レイヤー表示回数は「FL_REPS」で指定します。 「"norepeat"」なら全てを表示し終わった後停止します。 「"norepeat+1"」なら表示後 先頭のレイヤーに戻ってから停止します。
■ 写真の周辺部をぼかす
上のサンプル写真では 画像の周辺をぼかしています。
これをJavaScriptで行うのは難しいので写真ファイルを加工します。
Photoshopを使っている場合は 「レイヤー効果」の「光彩内側」を実行するといいでしょう。 ■ 動作を拡張したい
レイヤーを直接指定したい、
任意順に表示したい、画像をキャッシュしたいなどの場合は
自分でハンドラ関数を作ります。
そして keynavi_flip.js内の関数
「v=fl_set(レイヤー配列,msec1,msec2,steps,ハンドラ関数,...)」
「fl_play(v)」「fl_stop(v)」
を呼びます。
先述の制御用関数リストの各関数名から
「ez」を除いたものがあります。 ■ 写真の回りこみ
「写真ナビ」のシステムは絶対配置したレイヤーの使用を前提としています。
ページ内でのレイヤーの位置が特定の座標だと 決まっている場合はいいのですが 上のサンプルのように 回りこみなど相対的に位置を指定したい場合は 工夫が必要です。 具体的には回りこみ(align=rightなど)指定をした空のテーブル内に レイヤーを配置します。詳しくはソースをみてみて下さい。 ■ CGIプログラムと組合わせる
Flashとは異なり HTMLのみでアニメーションが作れるので
CGIとの連携がカンタンです。
表示する写真のパスを引き数として受け取り 上のHTMLコードを出力するようなモジュールを作ると 動的に写真やメッセージを変更できるので面白いでしょう。 また画像のリサイズや周辺部をぼかすような処理も プログラムで行うと 写真を指定しさえすれば 全自動でアニメーションが作れるのでラクです。
|
|||||||||||||||||
KeyNavi使い方 [Shift-A]
関連リンク
上位ページ[Shift-U]
先頭へ [W or O]
前のページ[Shift-P]
