画像をpopupさせるlightbox.js #2  Posted at 2008/06/09 (Mon) 19:26 [Blog]

ちょっと前のエントリで、画像をpopupさせるlightbox.js設置と書きましたが、そこへ、友達がlightbox.jsいいよね！最新のはもっといいよーとコメントくれました。のでさっそく設置。このサムネイルをクリックしてみて下さい。前回を見ている方は違いがわかるかと。ゴニョゴニョします。（・∀・）ｲｲ!!

最新のは、Lightbox2になってます。

Lightbox 2

Overview
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

ゴニョゴニョ動いて気持ち悪いイイです！サイトに行けば、設置の説明がありますが、一応、ここでも解説しておきます。長いので、続きを読む方は↓へどうぞ。

設置方法

まずは上記のサイトからlightbox V2.04をダウンロードしてきます。解凍したら、jsフォルダ、cssフォルダ、imagesフォルダを、アップロードします。そして、headタグ内に、

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

を書き加えて下さい。それぞれのスクリプトのアップロード先に合わせて、スクリプトの場所指定は書き換えて下さい。そして、次もheadタグ内に、

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

を書き加えて下さい。これもCSSファイルのアップロード場所に書き換えて下さい。（jsファイルもCSSファイルも解凍したままの構成のままアップロードする場合は、書き換えなくて大丈夫だと思います。）不安な方は、絶対パス指定すれば間違いないかと思います。

次は、ポップアップする画像の指定のやり方。画像のimgタグを、aタグで囲むわけですが、そのaタグ内に、rel="lightbox"を仕込みます。要は、

<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img href="images/image-1.jpg" width="160" height="107"></a>

こう指定する事で、大きな元の画像が表示では横160ox、縦107pxのサムネイル表示になり、クリックすると同一ウィンドウに元のサイズの画像がポップアップされます。（縦横サイズ及び画像ファイルは例えですので、要書き換え）

もし、1セットの関連する画像の場合は、下記のように指定すれば、ポップアップした画像をスライドショーのように見ることができます。aタグのtitle要素が、画像の見出しタイトルになるので、指定してあげるのが優しさ、みたいな。(´д｀)

<a href="images/image-1.jpg" rel="lightbox[hogehoge]" title="画像1"><img src="images/image-1.jpg" border="0" alt="" width="160" height="107"/></a>
<a href="images/image-2.jpg" rel="lightbox[hogehoge]" title="画像2"><img src="images/image-2.jpg" border="0" alt="" width="160" height="107"/></a>
<a href="images/image-3.jpg" rel="lightbox[hogehoge]" title="画像3"><img src="images/image-3.jpg" border="0" alt="" width="160" height="107"/></a>

まず画像のファイル名は↑のように連番をつけてあげましょう。そして、rel属性の後ろに[hogehoge]と、かっこ内に同じグループ名を付けましょう。（例のごとく、ファイル名、画像の縦横サイズ指定、グループ名は、例えですので、要書き換え）

↓ポップアップのスライドショーの例。

必ずしも大きな画像を縮小させてサムネイルにする必要はありません。あらかじめサムネイル用の小さな画像ファイルを作っておいて、通常表示にはサムネイル画像、ポップアップで元の画像が表示するようにすれば、WEBページも軽くなってグーです。↑の花の画像ファイルは、すべてサムネイル用画像を表示させて、クリックで元画像が表示されるようにしています。やり方は言うまでもありませんが、aタグの画像指定を元画像、imgタグの画像指定をサムネイル画像にすればよいだけです。

最新情報：
現在、うちではlightboxは使用しておりません。Lightviewというスクリプトに切り替えました。その理由は下記参照。

追記：
実は、うちに設置してたサイドバー折りたたみスクリプトとLightboxで使うprototype.jsがバッティングしてて、普通のLightbox2は動きませんでした。他に入れたり、スクリプトはずしてみたりして、ようやく目当てのスクリプトが設置できました。その報告、内容などは、次のエントリで確認してみて下さい。