RSS
画像をちょっとクールに開く（Lightbox JS）
JavaScript 2006年11月19日 23:16
以前から気になる画像の見せかた。
画面全体が半透明に覆われ、中央に任意の画像を表示させる。現在の閲覧画面を移動することなく、しかもクールに画像が表示される。Flashで表示させているのかな？と思っていたのだが、どうやら違う。
つい昨日、Lightbox JSの存在を知った。文章よりも実際の画像の見え方を見た方が早いだろう。
JavaScriptを使用したカスタマイズだった。では、具体的にカスタマイズの方法は。
Lightbox JSのページを見れば、全て書いてある。ごく簡単なカスタマイズなので、英語のページだが問題はないだろう。
1．必要なファイルをダウンロード（ページ中央よりやや下のDownloadから）。lightbox.cssのみ、lightbox.cssのファイル名で全てのファイルで保存。もしくは、既存のstyle_site.cssに追加。
2．それらをindex.htmlのある階層にアップする。
3．Movable Typeのメインページ、アーカイブ各ページ、任意のテンプレート（当サイトでは壁紙のページ）のhead部分に下記を書き加える。
<script type="text/javascript" src="<$MTBlogURL$>lightbox.js"></script>
cssを別ファイル（lightbox.css）とした場合は、下記も記述。
<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" />
4．Lightbox JSを使用して見せたい、任意の画像のソースに下記を記述。
rel="lightbox" title="画像の説明（任意）"例．
<a href="img/wallpaper/11svga.jpg" rel="lightbox" title="ミヤマカワトンボ">sample</a>
これでOK!ではなく。このままでは、各エントリーに若干の不具合がでてしまう。具体的には、close.gifとloading.gifが表示されない。
…困った。
他は問題ないのでgif画像へのパスがおかしいのだろうと、lightbox.jsをくまなく探すとあった。
// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
この部分（loading.gifとclose.gif）を絶対パスに変更する。
当サイトであればコチラ。
var loadingImage = 'http://aquafish.jp/loading.gif';
var closeButton = 'http://aquafish.jp/close.gif';
これで完璧。
Lightbox JSには、もう1つLightbox JS v2.0も公開されており、少し派手に、また複数画像の表示にも対応している。
今回のカスタマイズで、壁紙のページとFieldWalkの一部の画像をLightbox JSで表示させてみた。
｜
| コメントする (0)
| トラックバック（0）
｜▲TOP
