Navigation Menu

LightboxJSを入れてみた。

アーサー巷で大流行の、LightboxJSをevolbirdにも導入してみたっ!!
LightboxJSって何?
って感じの人がココでは多そうだけど、イラストサイトや写真サイトなど、画像を扱うサイトにはひっじょーに役立つ!!

ウチのギャラリーページを見ていただければ分かると思うが、サムネイルをクリックすると画像が拡大する。
しかも何かカッコいい!

ちょっとそこのイラストサイト運営してるアナタ!
導入も簡単だから使ってみてはいかが?

LightboxJSはjavascriptを使ってるんだけど、コレの利点は新しいウィンドウを開く事無く次々と見れていく点。

今回ボクが導入したのはLightboxJSのv1だけど、色んな機能がついたLightboxJSv2.0も出てる。
v2.0については、今回は詳しく触れないけど、今回のv1を見て興味持ったら導入してみるといいかもね。

▽ ここから追記部分 ▽

さてさて、肝心の導入方法だけど、英語だと分からんっ!!って人が、そこで導入を諦めたら勿体無いので、ウチでも導入方法を紹介いたします。

1)まずは、LightboxJS公式サイトにてDownloadにある5つのファイルをダウンロード。

上からだと一つひとつ落とさないといけないので、ウチでも落とせるようにしました。
(CCライセンスの帰属 2.5で公開されていて、作者のクレジットを消さなければ商用も改造も二次配布もOK)

LightboxJSダウンロード

2)ウチのからDLしたら、適当に解凍すればlightboxってフォルダが出来ます。
その中に、下記5つのファイルがあります。

close.gif :閉じる用の画像
lightbox.css :Lightbox用のスタイルシート
lightbox.js :JavaScriptファイル
loading.gif :画像読み込み中の画像
overlay.png :背景画像

LightboxJS公式サイトから別々でDLするのと同じです。

3)適当な場所にlightboxフォルダを設置。
例えば、gallery.htmlにlightboxを使いたいとすれば、gallery.htmlがある階層と同じ場所にアップロード。(何処でもいいんだけど分かりやすさ重視で)

4)適用させたいhtmlにjavascriptへのリンクと、CSSへのリンクをhead内に書きます。


と、

をば。

5)適用させたい場所(サムネイルとかテキスト)にリンクを貼る。

リンクを貼る際に、rel属性を追加します。
rel="lightbox"
の部分です。


これでリンクをクリックすればウチにあるギャラリーページと同じ動作を行えるようになります。

06年10月07日(土)|evolbird | コメント [0] | トラックバック [0]

トラックバックURL


コメントを投稿








PageTop