最終更新日： 2007年5月10日 16:00
１：Lightwindowスクリプトをこちらからダウンロードします。
２：以下のソースコードを<head>内に記述し、必要な.jsと.cssファイルを読み込みます。
(読み込み元の階層によっては、lightWindow.js内の画像読み込みのパスを書換える必要があります）
<!--Lightwindowスクリプト開始-->
<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>
<link rel="stylesheet" href="css/lightWindow.css" type="text/css" media="screen" />
<!--Lightwindowスクリプト終了-->
以下、サンプルです。
Link Name（とりあえず、Googleにリンク）
<p><a href="http://www.google.co.jp" class="lWOn" title="Google Japan" caption="これ、著作権的に違法っぽいので、実験目的だけにとどめておこう。">Link Name</a>（とりあえず、Googleにリンク）</p>
<p><a href="dummy/curry2.jpg" class="lWOn" title="カレー" caption="カレーは僕の大好物。特にキーマカレーにはうるさいYO。">画像よ、出てこーい。</a></p>
画像を出す１ 画像を出す2 画像を出す3 画像を出す4 画像を出す5
<p>
<a href="dummy/curry.jpg" class="lWOn" title="画像タイトル" caption="解説" rel="category[g1]">画像を出す１</a>
<a href="dummy/curry2.jpg" class="lWOn" title="画像タイトル" caption="解説" rel="category[g1]">画像を出す2</a>
<a href="dummy/fw1.jpg" class="lWOn" title="画像タイトル" caption="解説" rel="category[g1]">画像を出す3</a>
<a href="dummy/fw2.jpg" class="lWOn" title="画像タイトル" caption="解説" rel="category[g1]">画像を出す4</a>
<a href="dummy/fw3.jpg" class="lWOn" title="画像タイトル" caption="解説" rel="category[g1]">画像を出す5</a>
</p>
<p><a href="#inline" class="lWOn" >Link Name</a></p>
ちなみに#inlineの中身は以下の通り。
#inlineは普段は非表示になっていますが、リンクをクリックするとこれを読み込むワケです。
<div id="inline">
<p> 祗園精舎の鐘の声、諸行無常の響きあり。<br />
娑羅双樹の花の色、盛者必衰の理をあらわす。<br />
おごれる人も久しからず、唯春の夜の夢のごとし。<br />
たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。</p>
</div>
祗園精舎の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらわす。
おごれる人も久しからず、唯春の夜の夢のごとし。
たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。
