#topicpath
**lightwindow2.0とは？ [#b882adf3]
lightwindow2.0
http://www.stickmanlabs.com/lightwindow/
説明はここが詳しい
http://journal.mycom.co.jp/articles/2007/10/02/lw/index.html
**lightwindow内に表示できるもの [#wb06062f]
- イメージ、外部イメージ、イメージギャラリー、複数画像同時表示のギャラリー
- Flash、QucikTime、Windows Media、PDF、Flash Paper、YouTube、Flashギャラリー
- Webページ(他ドメインのもの含む)
- iframe
- 同ページ内で指定したidの内容物
**必要なファイル [#qe579766]
- css/lightwindow.css
- javascript/prototype.js
- javascript/scriptaculous.js
- javascript/effects.js
- javascript/lightwindow.js
**導入方法 [#gfa9f64f]
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>
他のサイト上にある画像も混在して表示させることもできる
**グループ化 [#nc50b551]
- グループ化するには<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>
**キーボード操作 [#n03d137c]
- 前の画像を表示するにはPキー、次の画像を表示するにはNキーを押します。
- 閉じるにはesc
- 前の画像を表示：Pキー、次の画像を表示：Nキー
- 閉じる：esc
**日本語で表示するようにする [#y281258b]
http://journal.mycom.co.jp/articles/2007/10/02/lw/005.html
**細かいカスタマイズ [#b5ee7137]
位置指定、サイズ指定、複数画像同時表示の枚数指定は、aタグで個別指定できる
**他のページを表示する [#c1183a3e]
サイズ指定可
<a href="http://journal.mycom.co.jp/" class="lightwindow page-options" params="lightwindow_width=640,lightwindow_height=480">
**FlashムービーやQucikTimeムービー、Windows Media ムービーも同様の方法で表示 [#ye4b1cb0]
<a href="movie/sample.mov" class="lightwindow page-options" params="lightwindow_width=340,lightwindow_height=260">映像を見る</a>
**プログラムで制御する [#rf572e50]
http://journal.mycom.co.jp/articles/2007/10/02/lw/009.html
自動的に表示する、10秒経過したら閉じるなどカスタマイズ可能？
