画像をクリックで拡大・ポップアップ表示する

htmlソース


<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<head> と</head> の間に貼り付けてください。

解説

ligthboxはフリーで使えるJavaスクリプトソースです。
Lightboxを使うと画像をクリックして拡大させたいときに
かっこよく表示できます。
サンプル:
ライトボックスサンプル
(クリックで拡大)

上に書いてあるソースをコピペするだけではLightboxは動きませんので、
公式サイトへ行ってJavaスクリプトのファイルをゲットしてくる必要があります。

Lightboxのスクリプトをダウンロードする

では早速、ファイルをダウンロードしにいきましょう。
LightBox2.04ダウンロードページ
↑ここから公式サイトのダウンロードページへ行けます。
(うまく表示されない場合はこちらからどうぞ。 LightBox公式サイト)

ダウンロードページで｢Lightbox v2.04｣と書かれた画像があるのでクリックしてください。これでスクリプトを保存することができます。

ダウンロード方法:

(クリックで拡大)

スクリプトを解凍する

うまくダウンロードすると保存したフォルダに
こんなアイコンが出来るはずです。
ライトボックスダウンロード
このままでは使えないので解凍しましょう。
解凍レンジや+Lhaca などのフリーソフトで解凍できます。

解凍するとこんなアイコンが作られます。

ライトボックスダウンロード
このアイコンをクリックして開けてみましょう。
すると、｢images｣・｢css｣・｢js｣三つのフォルダと、
｢index｣と言う名前のhtmが入っていると思います。

images:画像が入っています
css:スタイルシートが入っています
js:ジャバスクリプトが入っています

この３つのフォルダをアップロードしましょう。

htmに組み込む

次に、ためしにサンプルを作ってみましょう。 <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> lightboxを使いたいhtmlファイルの <body> と</body> の間にコードを貼り付けてください。

作ったhtmlファイルを｢images｣・｢css｣・｢js｣のファイルと同じディレクトリ(サーバーにあるフォルダ) にアップロードしてください。

自分で用意した画像でlighboxを使いたいときは


<a href="images/画像の名前.拡張子" 
rel="lightbox" title="画像のタイトル名">image #1</a>

画像の名前.拡張子と画像のタイトル名を
使いたい画像の名前に書き換えてください。
使いたい画像は｢images｣のフォルダ内にアップロードしましょう。

トラブル解決編

うまくいかないあれ？普通に画像が開くだけ…

Ｑ：Lightboxが機能していない？

Ａ：次の可能性が考えられるのでチェックしてみてください。

・フォルダをアップするときに｢アスキーモード｣でアップした
・Lightboxで表示したい画像を｢images｣フォルダとは違うところに入れている
・｢images｣/｢css｣/｢js｣の３つのフォルダとLightboxを使うhtmlファイルが別のディレクトリにアップされてる
・アップロードできていない部品がある
・ソースの一部をコピーできていなかった

画像をクリックで拡大・ポップアップ表示する

コピペで作るホームページ