Binbo-Special－技術資料らしきもの－JavaScript－lightwindowを試してみるでござる

世の中はどんどん複雑になっていくでござる

ニンニン

みなさん、いかがお過ごしですか？

何やら世の中には、画面遷移せずに（厳密に言うと画面遷移していないように見せて）、別のページとかを同ウィンドウ内に表示するようなものがいくつか存在するようです。

と言う訳で、拙者も実験してみるでござるよ！

lightwindowを試してみるでござるよ

「lightbox」とは別物なので注意。

downloadや本家の情報はここから
http://www.stickmanlabs.com/lightwindow/

早速実験でござる

１．アーカイブを解凍した中にある、「lightwindow」を、ディレクトリごとどこかに置く

間違っても、好きなあの娘の引き出しの中にこっそり置いてはダメです。というより意味ないです。
無駄な火種は起こさない方が良いので、普通に自サイトのどこかに置きましょう

尚、直下にあるファイル群や、galleryディレクトリはサンプル・ドキュメント用なので不要です。

２．headに以下を追加する

パスは適宜変更してください。

３．柿の種のピーナッツだけを一旦取り除く

４．随分とむなしい行動を取った自分に対する反省の弁を原稿用紙2枚程度に書き連ねる

５．リンク設定の<a>タグを、ちょっといじる

class="lightwindow" を付けてあげれば良いみたいですね。

サンプルでごｚ

Binbo-Specialトップページとか
 加藤夏希オフィシャルブログ～Beauty Beauty～（何故？）

周りが暗くならなかったり、画像リンク切れみたいなのが出る場合

実は、lightwindow.jsからダイレクトにimgタグ吐いていたり、画像ファイル名を指定している箇所がありますので、そこを直してあげる必要があります。

ローディング画像

ajax-loading.gif という画像が該当する画像ですので、lightwindow.jsをajax-loading.gifで検索し、そこのimgタグのパスを書き換えましょう。

周りが暗くならない？？

black-70.png が該当画像（black.pngもかな？）ですので、lightwindow.jsをblackで検索し、そこのパスを書き換えるのが一番楽。
ダイレクトにいじるのは嫌だし、他の階層でも使うからアリエナイ、ってな場合はその分画像コピーして配置するのもアリ。

その他情報でｇ

基本的にはgreyboxと同じような動作をするのですが、実はリンク先のドメインを見ていて、同じドメインのリンクの場合は、ajaxでデータを取得して、ページ内にdivを生成してiframeを使わずに表示。別ドメインの場合はiframeで表示、ってのがデフォルトの動作のようです。

それ故、同一ドメインへのリンクの場合、文字コードを合わせるのは当然として、表示させたい内容によってはレイアウトガタガタになります。（リンク先のHTMLがbodyとかにcssを書いているような場合は、容赦なく元のページのcssが書き換わったり、等）
ちゃんと追うのは面倒くさいのでちゃんと見ていませんが、lightwindow.css書き換えたり、lightwindow.jsからstyle指定している部分も見ないとちゃんと表示されない？かもしれません。

それじゃあ困るよってな場合は、greyboxをチョイスするか、

というように、paramsで指定すればiframeで表示してくれます。

そして、greyboxと同様、現時点ではiframeで表示する事による問題点があるので、私なりにソース解析して動作検証したメモ書きをこちらに残しておきます。

greyboxを試してみるでござるはこちら