エントリー内に画像を貼った時、大きい画像で表示さすのに 『Lightbox』 に対応させました。
正確に言えば、『Lightbox』 を元にした 『Lytebox』 。
色んなサイト見た事ある人は分かると思いますが、画像をクリックした時に 「ぶわぁ～」 っと表示されるアレですアレ。
論より証拠って事で、下の画像をクリックしてみてください。
ほら、「ぶわぁ～」 って表示されたでしょ？
従来の 『Lightbox』 だと表示されるまでに時間がかかる。
以前からそれがちょっとネックになってて導入を躊躇っていたんですが、表示速いのを見つけたんで導入しました。
これだとストレスにならずに済みますね。
導入方法は至って簡単。
以下のサイトから 『lytebox_v***.zip』 （***はバージョンNo） をダウンロード。
解凍されたフォルダ 『lytebox_v***』 の 『_v***』 を消して 『lytebox』 にする。
後はサイト内に 『ｌytebox』 フォルダをコピーするだけです。
（トップフォルダ内がお勧め？）
次に HTML を編集。
<head>～</head>内に、以下のコードを付け加えましょう。
<script type="text/javascript" language="javascript" src="サイトアドレス/lytebox/lytebox.js"></script>
<link rel="stylesheet" href="サイトアドレス/lytebox/lytebox.css" type="text/css" media="screen" />これで下準備は完了。
後は画像を貼ってる場所にリンクを貼るだけです。
（大きい画像とサムネ （小さい画像） が必要です。）
上の例の画像で言うと、以下のコードになります。
<a href="大きい画像アドレス" rel="lytebox" title="画像タイトル"><img src="サムネ画像アドレス" alt="画像タイトル" width="110" height="110" /></a>一つ注意しなければいけないのが、ページが完全に読み込まれないと、Lytebox （Lightbox） は作動しません。
只単に別ページで大きい画像が表示されるだけです。
画像が何枚もあって、続けて表示させたい場合は以下のコード。
<a href="大きい画像アドレス" rel="lytebox[vacation]" title="画像タイトル"><img src="サムネ画像アドレス" alt="画像タイトル" width="110" height="110" /></a>このスクリプトが気に入らない人は、他にも色々あるので自分好みのを探して導入してみてはいかがでしょう。
DesignWalker
Lightboxスクリプトいろいろ
Lightboxスクリプトいろいろ
