ミラクルタウン

コピペするだけで簡単にホームページが作れます。
初心者の方でも簡単HP!
ホームページ作成コピペで作るHP

LightBox2.0の使い方画像をクリックで拡大・ポップアップ表示する

htmlソースhtmlソース

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

解説解説

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

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

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

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

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

ダウンロード方法:
ライトボックス
(クリックで拡大)
文字の設定スクリプトを解凍する

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

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

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

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

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

文字の設定htmに組み込む

次に、ためしにサンプルを作ってみましょう。 lightboxを使いたいhtmlファイルの <body> と</body> の間にコードを貼り付けてください。

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

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

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

トラブル解決トラブル解決編

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

Q:Lightboxが機能していない?

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

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

素材屋ナビゲーション