LOVING CAT

　今まではWPのプラグインの「Lightbox 2」を使っていたんですが、それがなぜかIEではポップアップにならないので、その修正というか対策というか。
　結局のところプラグインは使わないことにしました。

Lightboxスクリプトいろいろ - DesignWalker
　上記のページでLightboxのいろいろなバリエーションが紹介されているのですが、ところどころやっぱりIEでは動かないものがあります。何なんでしょうねえ…。
　IEで動作するものの中でもLightviewがスタイリッシュでいい感じだったんですが、どうもIEではポップアップが広がるアニメーションがカクカクしてモサイのやめました。私のPCのスペックがへぼいのかもしれません。
　そんなわけで結局本家のスタンダードなものを。LightviewのパラメータがLightboxの rel="lightbox" ではなくて class="lightview" を使わなければならないのも、今までの記事を訂正する必要があるので面倒、というのもありまして。

　本家を使うことにしたのはいいんですが、CLOSEなどのボタン画像が出ませんでした。どうやらLightboxと同一のディレクトリ内のドキュメントでしか動作させないのが前提のようで、そのため呼び出す画像のパスに矛盾が出てしまう模様です。WPは擬似的にディレクトリ構造のようなURIにできるので、絶対パスでないと困りますね。

　てなわけでちょっくら修正を加えてみようという。そういう記事なわけです。前置きが長いですね。

　公式な説明と被ってますが、設置メモということで書いておきます。

ダウンロードする

　Lightbox 2からDLしてきます。

js/lightbox.js をエディタで編集、画像のパスを絶対URIにする

fileLoadingImage:        'http://lovingcat.net/lightbox2/images/loading.gif',
fileBottomNavCloseImage: 'http://lovingcat.net/lightbox2/images/closelabel.gif',

　強調部分を書き加えます。
　httpから始まるURIで、Lightboxのフォルダを指定します。
　私の場合、トップディレクトリに「Lightbox2」を置いていますのでこうなります。

サーバーにアップロード

　どこでもいいです。
　このサンプルソースではWPのトップディレクトリに置いています。

ヘッダにLightboxへのパスを記述

<script type="text/javascript" src="<?php bloginfo('home'); ?>/lightbox2/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('home'); ?>/lightbox2/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<?php bloginfo('home'); ?>/lightbox2/js/lightbox.js"></script>
<link rel="stylesheet" href="<?php bloginfo('home'); ?>/lightbox2/css/lightbox.css" type="text/css" media="screen" />

　説明不要かとは思いますが一応。prototype.js 、 scriptaculous.js 、 lightbox.js 、そしてCSSへのパスを記述します。直接http～から書いてもいいし、WPのディレクトリ内に置くならこのようにWPのテンプレートタグを使ってもいいかなと思います。