Lightbox
Lightboxは、blogで見栄えの良いギャラリービューワを手間をかけずに設定する事ができる。一度、そのページの<head></head>の間に、作者が作ったCSSファイルやJavaScriptファイルの指定をすれば、後は写真掲載のためリンク設定をする時に簡単な文字列を書き込めば（コピーペでOK）、それで終わり...なのである。ホームページ作成経験があり、htmlを手打ち経験者ならわかり易いと思うが、未経験でもわかるように説明したい。
■『Lightbox』
lightboxとは... まずは下のリンクをクリックしてください（ポップアップwindowが開きます。その後、画像をクリックしてください）
■『Lightbox』をダウンロード
lightboxをダウンロードしてください。Win、Mac関係なく使えます。
- ダウンロードしたら、ダブルクリックして解凍してください。解凍後、は下記の構成になっています。このうち「image-1.jpg」「thumg-1.jpg」「index.html」は、参考例を表示するためのファイルなので、直接必要ではありません。（取り消し線で消しているもの）
- ここでの例示方法では、「close.gif」「closelabel.gif」「loading.gif」のみ使いますのでアップロードは、この３つのファイルだけでも問題はありません。
図１ lightboxの構成ファイル
注）<script>タグを使用しますので、テンプレート（スキン）を自分用に修正できても、このタグが許可されてないblogは、設置できないと思われます。私が契約している中で、Exciteは<script＞タグを許可していません。
拡張子CSS、jsのファイルを使うので、これらのファイルをアップロードできるblogが望ましいです（例、FC2等）。また、ライブドアは、アップロードが画像しかできませんが、プロ契約以上の場合、FTPが使えるので設定は可能です。もしアップロードできない場合は、（業者によっては違反行為 ーファイルの置き場ー になるところもあるのであまり好ましい方法とは言えませんが）自分が契約しているプロバイダのホームページエリア等に置いて、以降の説明の設定で直接URLを指定すれば可能です。
- Lightbox Example（CSS、JSファイルを外部参照＿直接URLを指定）
- ...同じように動作します。
但し、FireFoxでは動作しません。- Firefoxで動作しない件、原因がわかりました。現在、上記のリンクでFirefoxでも動きます。
- 根本の原因なのですが、一言で語るなら「Firefoxのweb標準仕様への厳格な対応」のためです。
- もう少し詳しく言うなら、
- 「サーバーのMIME設定がきちんとされていないとCSSファイルをFirfoxがはじくからです。」
- 従って、設定がきちんとされているサーバーにCSSファイルを設置すれば、上記の様に読み込まれます。FIREFOXで外部CSSが効かない場合を見てください。
- ただしこのリンクではバグと言っていますが、正しい仕様ですのでバグとは言えません。
- まあ、もう少し融通を利かせてよ。。。という感じではありますが。
■Blogで使いたい。
行程は３段階。
１）
blogのデザイン変更をHTMLやCSSで変更する...を使います。＜head＞以下に次の文字列を付け加えます。このまま、まずコピペしてください。
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
href="css/lightbox.css"の" "で囲まれたURlを自分の lightbox.cssの*パス（URL）に変更します。
以下、
- src="js/prototype.js"
- src="js/scriptaculous.js?load=effects,builder"
- src="js/lightbox.js"
も同様にパスを変更します。
*「パス」とは、ファイルの存在場所を表す記述法のことです。リンクを設定する時や、画像ファイルの場所を参照させる時に使用します。
２）
画像側のパス設定です。
<a href="images/yukei.jpg" rel="lightbox" title="夕景色 瀬戸内に沈む夕日"><img src="images/yukei_thum.jpg" width="350" height="233" alt="yukei_thum.jpg" /></a>
これは、小さいサムネール画像（yukei_thum.jpg）をクリックして、大きい画像（yukei.jpg ）を表示するリンクですが、<a herf=" "の後ろに rel="lightbox" を付け加えます。毎回行う必須の作業はこれだけです。後ろの title＝ 以降の文書が画像の下にでる説明文になります。
３）
ボタン類「close.gif」「closelabel.gif」「loading.gif」の置き場所がimagesフォルダ以外の場合は、以下のパスの書き換えも必要になります。これも、今回１回きりです。
lightbox.js をメモ帳で開きます。
49、50行目。images/のパスを、gifファイルを置いているパスに書き換える。
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
109行目。同じくimages/のパスを同じように書き換える。
// <img src="images/loading.gif">
122行目。同じくimages/のパスを同じように書き換える。
// <img src="images/close.gif">
ちょっとややこしいかな^^:
どうしてもうまくいかない場合は...ブラウザのURL欄に絶対パス（http://...で始まるやつ）を入力して、画像または内容が表示されるか確認。それを変更するパスとしてに入力するという、裏技？で対応しましょう。絶対パスは、プロバイダを変えた、ドメイン名が変わった等々、全てのリンクの書き換えが必要になるから効率的ではないのですが、この場合はまあ良いでしょう...
■Webサイトで使いたい。
Webサイトで使う場合は、もっと簡単です。
上記の図１の中に写真を掲載するhtmlファイルを設定（入れる）します。
一例になりますが、2008年のGTの写真を掲載したいなら、仮に2008SGT01.htmlと名付けます。そのhtmlファイルの<head>以降 </head>までに
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
をコピペします。URlの変更はしなくても大丈夫です。
あとは、同様にrel="lightbox" を付け加えます。それでOKです。
またボタン類もimagesフォルダに格納された初期状態のままですので、パス変更は必要ありません。
さあ試してみてください。うまくいけば、すーーっとバックが落ちて、画像が展開されます。
見た目、一味も二味も違う、Webギャラリーになりますよ。
（了）
前のページへ