Lightbox2から、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プラグインを管理している場合の例です。</p><p>jQuery Lightboxの各ファイル群は以下のような構成となっているとします。

[+] example.com
[-]= blog
   [-]= <em>/js/</em>
      [-]= <em>/jquery/</em>
         [-]= jquery-1.3.2.min.js
         [-]= jquery.lightbox.js
         [-]= jquery.lightbox.min.js
         [-]= <em>/css/</em>
            [-]= jquery.lightbox.css
            [-]= jquery.lightbox.packed.css
         [-]= <em>/images/</em>
            [-]= 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'
                       }
                 },

■
■ エントリページ　：　http://www.markdiary.com/archives/2009/09-07061942.php
■
■ www.markdiary.com 2010