プロジェクト/lightwindowをアクセシブルにしよう/lightwindow2.0とは？ http://www.ark-web.jp/accessibility/52.html

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秒経過したら閉じるなどカスタマイズ可能？

by 株式会社アークウェブ
アークウェブのアクセシビリティへの取り組み(WCAGやJIS X 8341-3、WAI-ARIAなど)についてまとめる場所です

menu

• 計画
• Ajaxのアクセシビリティ対応;
• アクセシビリティメモ;
• 実践アクセシビリティ;

Tag

　>>more...

最新の20件