Lightbox2から、jQuery Lightbox Plugin (balupton edition)への移行メモ

このブログでつかっていた、Lightbox2をjQuery Lightbox Pluginに移行してみました。 移行の時に設定したことなどメモしておきます。

Lightboxの説明はナシ、ということで。。これまで使っていたLightboxは以下のページのものでした。

• Lightbox 2

jQueryに移植されたLightboxはいくつかあったと思うのですが、そのなかで、jQuery Lightbox Plugin (balupton edition)を利用することにしました。プラグインのページは以下にあります。

• jQuery Lightbox Plugin (balupton edition)

変更をおこなう箇所ですが、haed要素内のコレまで使っていた、Lightbox2のコードをjQuery Lightbox用のコードに書き換えるだけです。テンプレートにて以下のような記述のところを探して変更をおこないます。

<link rel="stylesheet" href="<$MTBlogURL$>css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous.js?load=effects,builder"></script>

以下のように書き換えます。jQuery本体はGoogle AJAX Libraries APIを利用した例です。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery.lightbox.min.js"></script>

jQuery Lightbox Pluginではプラグイン側でcssファイル等のパスを管理されているようなのでlink要素による記述部分を省略することができます。しかしながら、jQuery Lightbox PluginのDemoページにあるようなフォルダの構成にしますと、ブログの記事のディレクトリ階層の関係でJavaScriptファイルを管理するのに都合が悪いため管理しやすいように変更をおこなうとします。

以下はブログのディレクトリが/example.com/blog/であり、/js/jquery/にてjQueryプラグインを管理している場合の例です。

jQuery Lightboxの各ファイル群は以下のような構成となっているとします。

[+] example.com
[-]= blog
   [-]= /js/
      [-]= /jquery/
         [-]= jquery-1.3.2.min.js
         [-]= jquery.lightbox.js
         [-]= jquery.lightbox.min.js
         [-]= /css/
            [-]= jquery.lightbox.css
            [-]= jquery.lightbox.packed.css
         [-]= /images/
            [-]= blank.gif
            [-]= loading.gif
            [-]= next.gif
            [-]= prev.gif

jquery.lightbox.jsを上記の構成にあわせたファイルパスの調整をおこないます。これが正しく設定されていないときちんと表示されませんので注意します

以下に示すコードはjquery.lightbox.jsファイルからファイルパスの設定の部分を抜粋したものです。

なお、実際に使う（使っている）のはjquery.lightbox.min.js（jquery.lightbox.jsでも可能です）のほうです。min.jsのほうでは、具体的に何行目の何処其処という風に示しにくいので見易さという点で、jquery.lightbox.jsのほうで説明させていただきます。

もしjquery.lightbox.jsを利用することにして、以下を参考にされるときは、下のコードはワタくシがインデント位置をかえてしまっていますので、そのままコピーせずにもとのファイルの該当するところに変更を加えるようお願いします。

jquery.lightbox.min.jsを使う場合は、変更箇所が把握できたら、jquery.lightbox.min.jsのほうで場所を検索しながら変更をおこないます。(src:nullで検索するといいかとおもいます)変更するところを間違わないように気をつけましょう。query.lightbox.min.jsまたはjquery.lightbox.jsの変更が済んだら、サーバにファイルをアップロードしておきます。

jquery.lightbox.js より抜粋
// Options
		
   src:'http://example.com/blog/js/jquery/jquery.lightbox.js',// the source location of our js file
   baseurl:    'http://example.com/blog/js/jquery/',

files: {
          compressed: {
                          js: {
                                  lightbox:     'jquery.lightbox.min.js',
                                  colorBlend:   'jquery.color.min.js'
                       },
                         css: {
                                  lightbox:     'css/jquery.lightbox.css'
                              }
                       },
         uncompressed: {
                          js: {
                                  lightbox:     'jquery.lightbox.js',
                                  colorBlend:   'jquery.color.js'
                        },
                         css: {
                                  lightbox:     'css/jquery.lightbox.css'
                              }
                       },
                      images: {
                                  prev:         'images/prev.gif',
                                  next:         'images/next.gif',
                                  blank:        'images/blank.gif',
                                  loading:      'images/loading.gif'
                       }
                 },

準備が整ったら、テンプレートを保存して、記事アーカイブを再構築します。ワタくシの場合はLightboxを利用した記事がそれ程多くないので、MT管理画面からrel="lightboxで検索して出てきた記事だけを保存しなおしという形で変更を反映しました。

Lightboxのグループ化の部分ですが、jQuery Lightbox Plugin用の書き方に変更しておきます。rel="lightbox[hoge]"とあるものを、rel="lightbox-hoge"のように-（ハイフン）のあとに任意の文字列という形に変更しておけば移行は完了です。

• ぬり絵原画ぎゃらりぃ（過去分）