Lightbox v2.04 を設置してみた
最近、いろいろなサイトでポップアップウィンドウを開かずに画像を拡大表示しているので、「かっこいいな」って思ってました。んで、いろいろ調べてみたら、Lightboxってのが良いらしいとわかり、早速ダウンロード。公式サイトはこちら。
まずは、lightbox2.04.zipを解凍してindex.html以外をブログのトップへアップロードっと行きたいところだが、スクリプトの一部を変更しなくてはならない。
js/lightbox.jsを開き、
//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
これを各自のサイトに合わせて変更する。当サイトの場合、
//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: '/blog/archives/images/loading.gif',
fileBottomNavCloseImage: '/blog/archives/images/closelabel.gif',
になります。これを変更しないと、Closeボタンなどが表示されません。
ここまで終わったら、index.htmlを除きアップロードします。
あとは、画像を表示したいところで、
<a href="/blog/archives/images/altezza/20050803-1.jpg" rel="lightbox">ここをクリック</a>
こんな感じで書けばかっこよく表示されます。
試しに、ここをクリックしてください。
如何です？かっこいいでしょ？
単純にaタグにrel="lightbox"を付けるだけです。
これだけだと、画像を貼り付けるたびに追記するか、*.pmファイルを変更しなければならない。
そこで登場するのがto-Rさんが公開されているLightBox2MTプラグインです。このプラグインをインストールすると、画像のサムネール表示で記事に挿入すると、rel="lightbox"を付けてくれる優れものです。ただし、ポップアップに設定した場合には、機能しないので注意が必要です。
今まで書いた記事を書き直すのは面倒なのでやりませんが、今後、これが自動的に機能すると思うとちょっと幸せ♪