LightboxJSを入れてみた。
巷で大流行の、LightboxJSをevolbirdにも導入してみたっ！！
LightboxJSって何？
って感じの人がココでは多そうだけど、イラストサイトや写真サイトなど、画像を扱うサイトにはひっじょーに役立つ！！
ウチのギャラリーページを見ていただければ分かると思うが、サムネイルをクリックすると画像が拡大する。
しかも何かカッコいい！
ちょっとそこのイラストサイト運営してるアナタ！
導入も簡単だから使ってみてはいかが？
LightboxJSはjavascriptを使ってるんだけど、コレの利点は新しいウィンドウを開く事無く次々と見れていく点。
今回ボクが導入したのはLightboxJSのv1だけど、色んな機能がついたLightboxJSv2.0も出てる。
v2.0については、今回は詳しく触れないけど、今回のv1を見て興味持ったら導入してみるといいかもね。
▽ ここから追記部分 ▽
さてさて、肝心の導入方法だけど、英語だと分からんっ！！って人が、そこで導入を諦めたら勿体無いので、ウチでも導入方法を紹介いたします。
1）まずは、LightboxJS公式サイトにてDownloadにある5つのファイルをダウンロード。
上からだと一つひとつ落とさないといけないので、ウチでも落とせるようにしました。
（CCライセンスの帰属 2.5で公開されていて、作者のクレジットを消さなければ商用も改造も二次配布もOK）
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]
New Entry
Category
Archive
Monthly
- 07年05月 [1]
- 06年11月 [1]
- 06年10月 [2]
- 06年09月 [1]
- 06年08月 [3]
- 06年07月 [3]
- 06年06月 [5]
- 06年05月 [3]
- 06年04月 [11]
- 06年03月 [4]
- 06年02月 [8]
- 06年01月 [4]
- 05年12月 [2]
- 05年11月 [12]
- 05年10月 [1]
- 05年09月 [2]
- 05年08月 [17]
- 05年07月 [13]
- 05年06月 [21]
- 05年05月 [17]
- 05年04月 [19]
- 05年03月 [5]
- 05年02月 [27]
- 05年01月 [14]
- 04年12月 [7]
- 04年11月 [16]
- 04年10月 [10]
