Flash フリーサンプル素材 >> Flash制作に便利な情報一覧 >> LightWindowでFlashを表示する設定の仕方・方法
スポンサードリンク

LightWindow

 Ajaxライブラリ

AjaxライブラリとはWebブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行なって処理を進めていく対話型Webアプリケーションです。

 LightWindowとは?

LightWindow 2.0はAjax(非同期通信処理)を利用して動画や画像を表示するライブラリです。
同じ種類のライブラリとしてはLightBoxThickBoxGreyBoxなどがあります。
その中でLightWindowは最も高機能なライブラリではないでしょうか。
ページや画像だけでなくQuickTime ムービーやFlashムービー、PDFやサイト表示など非常に多くのデータをページ内に表示させることができます。

 LightWindowライブラリのダウンロード

まずは、下記のURLよりLightWindowをダウンロードします。
>>> http://www.stickmanlabs.com/lightwindow/#download
You can grab the files here: lightwindow.zip (v2.0)のlightwindow.zipをクリックし任意に保存します。
解凍するとHTMLファイルや各フォルダがでてきます。
その中で、index.htmlを開いてみます。
英語で判りづらいかもしれませんが、まずはSingle SWF Example - Because I Love Flash...をクリックしてみます。

 LightWindowの必要ファイル

上記のindex.htmlのHTMLタグを見てみます。

テキストエディタで開くと
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/lightwindow.css" />
<!-- JavaScript -->
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
</head>

と表示されます。
ここで、重要なのは、
cssフォルダ内の lightwindow.css
javascriptフォルダ内の prototype.js effects.js lightwindow.js の4つです。

 LightWindowを自分のサイトで表示

LightWindow 2.0は非同期通信などの処理にprototype.jsライブラリ、エフェクト処理にscriptaculousライブラリを使用しています。
LightWindow 2.0を使用する前には、これら2つのライブラリを読み込ませる必要があります。
読み込ませる時には必ず最初にprototype.jsライブラリ、次に scriptaculousライブラリの順番で読み込ませます。
また、LightWindowを起動するときの専用cssがlightwindow.cssです。
そこで、自分のサイトに上げるには、次の5つを設置します。
①cssフォルダのlightwindow.cssをコピーし、任意にペースト。
②javascriptフォルダのprototype.jsとeffects.jsとlightwindow.jsとscriptaculous.jsをコピーし、任意にペースト。

</head>の前が良いみたいです。
LightWindow用 metaタグの作成例
<link rel="stylesheet" type="text/css" href="css/lightwindow.css" />
<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>

さらに、imagesフォルダをコピーし、同じ階層にペーストします。LightWindow用の背景gifなどが入っています。

 LightWindowで自分のファイルを表示

次に、読み込ませるファイルの設定です。

先ほどのindex.htmlを見ると、表示してみたFlashのファイルは
<a href="gallery/header2.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow page-options" params="lightwindow_width=843,lightwindow_height=324" title="Preview: Doesn't your masthead look perdy?"><strong>Single SWF Example</strong> - Because I <strong>Love</strong> Flash...</a>

と記述されています。

これを利用し、不要な部分を削除し編集します。
<a href="表示するファイル" class="lightwindow page-options" params="lightwindow_width=幅サイズ,lightwindow_height=縦サイズ" title="タイトル"><strong>タイトル</strong></a>

これで、LightWindowが表示できます。>>> LightWindowで表示

 LightWindowをカスタマイズ バックグランドカラーの変更

デフォルテでのLightWindowで表示するコンテンツファイルのバックグランドは白(#FFFFFF)になっています。
そのため、表示するFlashのベースカラーが白では困る場合があります。

そこで、lightwindow.cssを一部変更します。
#lightwindow_contents {
overflow: hidden;
z-index: 0;
position: relative;
border: 10px solid #ffffff;
background-color: #ffffff;
}

background-colorやborderを修正します。>>> LightWindowで表示

Bookmark All-in-Service
20のソーシャルブックマークに対応しています。