#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を指定するだけ。
 - <a>タグのclass属性にlightwindowを指定するだけ。
 
 
 制作者(Author)を表示したい場合:author属性で制作者を指定します。
 - 制作者(Author)を表示したい場合:author属性で制作者を指定します。
  <a href="photo/001.jpg" class="lightwindow" title="富士山" author="OpenSpace">
 
 キャプションを表示したい場合:<a>タグにcaption属性にキャプションを指定
 - キャプションを表示したい場合:<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="富士山">
 - グループ化するには<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="夕焼け">
  </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="富山湾">
  </a>
  <a href="photo/003.jpg" class="lightwindow" rel="Photo[00]" title="富山湾">
     <img src="thumb/003.jpg" width="96" height="54" alt="富山湾">
 </a>
  </a>
 
 **キーボード操作 [#n03d137c]
 前の画像を表示するにはPキー、次の画像を表示するにはNキーを押します。
 閉じるにはesc
 - 前の画像を表示:Pキー、次の画像を表示:Nキー
 - 閉じる:esc
 
 **日本語で表示するようにする [#y281258b]
 http://journal.mycom.co.jp/articles/2007/10/02/lw/005.html
 
 **細かいカスタマイズ [#b5ee7137]
 位置指定、サイズ指定、複数画像同時表示の枚数指定は、aタグで個別指定できる
 
 *他のページを表示する [#c1183a3e]
 **他のページを表示する [#c1183a3e]
 サイズ指定可
 <a href="http://journal.mycom.co.jp/" class="lightwindow page-options" params="lightwindow_width=640,lightwindow_height=480">
  <a href="http://journal.mycom.co.jp/" class="lightwindow page-options" params="lightwindow_width=640,lightwindow_height=480">
 
 
 *FlashムービーやQucikTimeムービー、Windows Media ムービーも同様の方法で表示 [#ye4b1cb0]
 **FlashムービーやQucikTimeムービー、Windows Media ムービーも同様の方法で表示 [#ye4b1cb0]
  <a href="movie/sample.mov" class="lightwindow page-options" params="lightwindow_width=340,lightwindow_height=260">映像を見る</a>
 
 *プログラムで制御する [#rf572e50]
 **プログラムで制御する [#rf572e50]
 http://journal.mycom.co.jp/articles/2007/10/02/lw/009.html
 自動的に表示する、10秒経過したら閉じるなどカスタマイズ可能?
 
 

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら