- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- プロジェクト/lightwindowをアクセシブルにしよう/lightwindow2.0とは？ へ行く。
- 1 (2008-03-28 (金) 11:15:28)
プロジェクト/lightwindowをアクセシブルにしよう/lightwindow2.0とは？
lightwindow2.0とは？ †
lightwindow2.0
http://www.stickmanlabs.com/lightwindow/
説明はここが詳しい
http://journal.mycom.co.jp/articles/2007/10/02/lw/index.html
lightwindow内に表示できるもの †
- イメージ、外部イメージ、イメージギャラリー、複数画像同時表示のギャラリー
- Flash、QucikTime、Windows Media、PDF、Flash Paper、YouTube、Flashギャラリー
- Webページ(他ドメインのもの含む)
- iframe
- 同ページ内で指定したidの内容物
必要なファイル †
- css/lightwindow.css
- javascript/prototype.js
- javascript/scriptaculous.js
- javascript/effects.js
- javascript/lightwindow.js
導入方法 †
head内：
<script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
body内：
a>タグのclass属性にlightwindowを指定するだけ。
制作者(Author)を表示したい場合：author属性で制作者を指定します。
<a href="photo/001.jpg" class="lightwindow" title="富士山" author="OpenSpace">
キャプションを表示したい場合：<a>タグにcaption属性にキャプションを指定
<a href="http://www.openspc2.org/title.gif" class="lightwindow" title="Logo" caption="ロゴです"> OpenSpaceのロゴを表示 </a>
他のサイト上にある画像も混在して表示させることもできます
グループ化 †
グループ化するには<a>タグのrel属性に[グループ名]を指定します。グループ名が同じであれば1セットとしてみなされ処理されます。
カテゴリ名はPhoto、グループ名は00
a href="photo/001.jpg" class="lightwindow" rel="Photo[00]" title="富士山">
<img src="thumb/001.jpg" width="96" height="54" alt="富士山">/a>
a href="photo/002.jpg" class="lightwindow" rel="Photo[00]" title="夕焼け">
<img src="thumb/002.jpg" width="96" height="54" alt="夕焼け">/a>
a href="photo/003.jpg" class="lightwindow" rel="Photo[00]" title="富山湾">
<img src="thumb/003.jpg" width="96" height="54" alt="富山湾">/a>
キーボード操作 †
前の画像を表示するにはPキー、次の画像を表示するにはNキーを押します。
閉じるにはesc
日本語で表示するようにする †
http://journal.mycom.co.jp/articles/2007/10/02/lw/005.html
細かいカスタマイズ †
位置指定、サイズ指定、複数画像同時表示の枚数指定は、aタグで個別指定できる
他のページを表示する †
サイズ指定可
a href="http://journal.mycom.co.jp/" class="lightwindow page-options" params="lightwindow_width=640,lightwindow_height=480">
FlashムービーやQucikTimeムービー、Windows Media ムービーも同様の方法で表示 †
<a href="movie/sample.mov" class="lightwindow page-options" params="lightwindow_width=340,lightwindow_height=260">映像を見る</a>
プログラムで制御する †
http://journal.mycom.co.jp/articles/2007/10/02/lw/009.html
自動的に表示する、10秒経過したら閉じるなどカスタマイズ可能？
