jQuery lightBox plugin を入れてみた

ブログ記事に挿絵を入れることについては、まったく無頓着だったけどやはり画像があると見栄えがするので、これからは積極的に使っていこうかな。で、前々から気になっていたのが、全体の明度を下げて画像を目立たせて表示する（lightboxっていうのかな？）JavaScript。これを入れてみた。これがなかなかいい感じですｗ

私が導入したのは、「dxd8.com - 中世に描かれた本の挿絵を集めた画像素材サイト」に導入されているものと同じ、「jQuery lightBox plugin」 だ。 Phizeさんが選んだものだから間違いないだろうという読み^^;

Geeklogに入れるのに特別なことは何もないけど、一応導入する手順を書いておく。

lightBoxは、jQuery lightBox pluginで入手しよう。
lightBoxはjQueryというJavaScriptライブラリで作成されている。lightBoxのアーカイブにはjQueryが同梱されているが、私はjQueryの最新バージョンを別途準備した。最新版はjquery.comから入手しよう。

jQueryには圧縮の程度別に3種類が用意されているが、私はjquery-1.2.2.pack.jsを選択して、jquery.jsとリネームした。

lightBoxのアーカイブにも、同様に3種類が用意されているが、あとからlightBoxが使用する画像データのアドレスを設定するため、非圧縮版のjquery.lightbox-0.4.jsを選択し、jquery.lightbox.jsとリネームした。それから同様にjquery.lightbox-0.4.cssもjquery.lightbox.cssとリネームした。

次にGeeklogシステム内にファイルを配置する。私は次のように配置した。（Geeklogの公開領域を{public_html}と表記している。）

{public_html}/javascript/jquery.js
{public_html}/javascript/lightbox/jquery.lightbox.js
{public_html}/javascript/lightbox/jquery.lightbox.css
{public_html}/javascript/lightbox/images/lightbox-blank.gif
{public_html}/javascript/lightbox/images/lightbox-btn-close.gif
{public_html}/javascript/lightbox/images/lightbox-btn-next.gif
{public_html}/javascript/lightbox/images/lightbox-btn-prev.gif
{public_html}/javascript/lightbox/images/lightbox-ico-loading.gif

jquery.lightbox.jsをエディタで開き、27～32行目付近を次のように書き換える。（自分のサイトのURLに合わせよう）

// Configuration related to images
imageLoading:  'http://www.example.com/javascript/lightbox/images/lightbox-ico-loading.gif',
imageBtnPrev:  'http://www.example.com/javascript/lightbox/images/lightbox-btn-prev.gif',
imageBtnNext:  'http://www.example.com/javascript/lightbox/images/lightbox-btn-next.gif',
imageBtnClose: 'http://www.example.com/javascript/lightbox/images/lightbox-btn-close.gif',
imageBlank:    'http://www.example.com/javascript/lightbox/images/lightbox-blank.gif',

あとは、jquery.lightbox.jsをコールするためのスクリプトが必要だ。私はcustom.jsをいうファイルを作成してその中に記述することにした。

$(function() {
    $('.figure a').lightBox();
});

私は、このcustom.jsを次のように配置した。

{public_html}/javascript/custom.js

この中の、'.figure a'はCSSのセレクタと同じだ。lightBoxはhtmlの中から、例えば次のようなタグを見つけ出して、対応（該当の画像をクリックしたときにlightboxを表示）してくれるようになっている。

<div class="figure">
  <a href="http://www.example.com/images/articles/sample_original.jpg" title="sample"><img width="300" height="200" src="http://www.example.com/images/articles/sample.jpg" alt=""></a>
</div>

最後の仕事が残っている。GeeklogのテンプレートにlightBoxを起動するためのタグを埋め込もう。
{public_html}/layout/{theme_name}/header.thtmlをテーマエディタやテキストエディタなどで開き、次のようにヘッダー部にタグを追加してやる。

<!-- jQuery lightBox plugin -->
<script type="text/javascript" src="http://www.example.com/javascript/jquery.js"></script>
<script type="text/javascript" src="http://www.example.com/javascript/lightbox/jquery.lightbox.js"></script>
<script type="text/javascript" src="http://www.example.com/javascript/custom.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.example.com/javascript/lightbox/jquery.lightbox.css" media="screen">
<!-- / jQuery lightBox plugin -->

これで準備完了。Geeklogで記事を書き、画像をアップロードしたら、記事に次のようにタグを埋め込んでみよう。

<div class="figure">[image1]</div>

どうぞお試しあれ。

タグ：javascript jquery lightbox