2008年02月10日

ref.inc.phpでThickBoxを使う

最近ブログなどで画像をクリックすると画面が暗くなってその上に対象の画像が表示される場合がありますが、そう言う機能を実現する一つの方法としてと言うのがあります。

ただ、これを何も考えずにPukiWikiに組み込んでみるといろいろと不具合があるので、今回それを何とかしてみました。

なお、対象はPukiWiki1.4.7なので、それ以外のバージョンの方は適宜読み替えてください。

また、導入するとThickBoxの仕様で全ての要素のpaddingとmarginのデフォルト値が0になりますので、CSSの状況によっては表示が破綻する可能性があります。

特に、<P>タグで空行が出来なくなるので、これが気になる場合は、事前にskin/pukiwiki.css.phpの最後の行以降に以下を追加しておいてください。

P {
 margin-bottom:1em;
}
さて導入方法ですが、以下の手順となります。
  1. PukiWiki対応ThickBoxの導入
  2. skin/pukiwiki.skin.phpへjsやcssの追加
  3. plugin/ref.inc.phpの変更
1.PukiWiki対応ThickBoxの導入

以下のファイルをダウンロードして入手してください。

  • 拙作のThickBox3.1 for PukiWiki をダウンロードして解凍
  • ThickBox 3.1から「loadingAnimation.gif」を入手
  • jQueryのサイトからjquery-1.2.3.min.jsをダウンロードして「jquery.js」にリネーム
    (Downloadの所に3つ並んでいるうちの、一番上のリンクです。同じバージョンが見つからない場合は最新版で試してみてください。
    また、別にMinified版でなくても動作するとは思いますが、ファイルサイズと実行速度からMinifiedがお勧めです)
全て入手したら、対象のPukiWikiに以下のようにファイルを配置(アップロード)してください。
  • image/
    • loadingAnimation.gif
  • skin/
    • jquery.js
    • thickbox.css
    • thickbox.js
(ThickBox3.1_for_PukiWiki.zipを解凍すると出てくる*.patchは今後ThickBoxのバージョンが上がり、それに対して同様の修正を行う場合の参考用ですので動作には不要です。必要なければ削除してください)

2.skin/pukiwiki.skin.phpへjsやcssの追加

skin/pukiwiki.skin.phpの80行目辺りに以下の行の青字の行の追加を行ってアップロードしてください。

 <link rel="SHORTCUT ICON" href="<?php echo $image['favicon'] ?>" />
 <link rel="stylesheet" href="<?php echo SKIN_DIR?>thickbox.css" type="text/css" media="screen" />
<?php if (PKWK_ALLOW_JAVASCRIPT) { ?>
 <script type="text/javascript" src="<?php echo SKIN_DIR?>jquery.js"></script>
 <script type="text/javascript" src="<?php echo SKIN_DIR?>thickbox.js"></script>
<?php } ?>
 <link rel="stylesheet" type="text/css" media="screen" href="skin/pukiwiki.css.php?charset=<?php echo $css_charset ?>" charset="<?php echo $css_charset ?>" />
 <link rel="stylesheet" type="text/css" media="print"  href="skin/pukiwiki.css.php?charset=<?php echo $css_charset ?>&media=print" charset="<?php echo $css_charset ?>" />
なお、PukiWikiでJavaScriptの実行を許可してない場合は、併せて許可にしてください

pukiwiki.ini.phpの155行目の「PKWK_ALLOW_JAVASCRIPT」を1にする。

define('PKWK_ALLOW_JAVASCRIPT', 1);
3.plugin/ref.inc.phpの変更

最後にref.inc.phpで引数によってthickboxを呼び出すように改造します。

改造(と言うより追記)する場所は以下の青字です。

ref.inc.phpの122行目付近

              'nolink' => FALSE, // 元ファイルへのリンクを張らない
              'noimg'  => FALSE, // 画像を展開しない
              'zoom'   => FALSE, // 縦横比を保持する
              'tblink' => FALSE, // 表示にThickBoxを利用する
              '_size'  => FALSE, // サイズ指定あり
              '_w'     => 0,       // 幅
              '_h'     => 0,       // 高さ
ref.inc.phpの348行目付近
              }
      }

      $tblink = '';
      if ($params['tblink']) {
            $tblink =  ' class="thickbox"';
      }
      if ($is_image) { // 画像
              $params['_body'] = "<img src=\"$url\" alt=\"$title\" title=\"$title\" $info/>";
              if (! $params['nolink'] && $url2)
                      $params['_body'] = "<a href=\"$url2\" title=\"$title\"$tblink>{$params['_body']}</a>";
      } else {
              $icon = $params['noicon'] ? '' : FILE_ICON;
              $params['_body'] = "<a href=\"$url\" title=\"$info\"$tblink>$icon$title</a>";
      }

      return $params;
以上をアップロードして、準備は完了です。

【使い方】

refプラグインに以下のオプションが増えます。

tblink
このオプションを付けることで、対象ファイルへのリンクがThickBox経由で開くようになります。

以下、使用例です。

//クリックするとThickBox経由で画像を開くようにする
&ref(写真1.JPG,tblink);

//画面には25%で表示して、クリックするとThickBox経由で画像を開く
&ref(写真2.JPG,tblink,25%);

//画面にはリンクのみを表示して、クリックするとThickBox経由で画像を開く
&ref(写真3.JPG,tblink,noimg);

//ThickBox経由でFlushファイルを開く
&ref(test.swf,tblink);
なお、相反するオプションの「nolink」を設定すると「tblink」は無効になりますのでご注意下さい。

【解説】

ThickBoxには以下の改造を行っています

  • URLからファイルの拡張子を解析するのをやめて、URLの末尾を拡張子とみなして処理の分岐を行うようにしています。
    (そうしないとrefプラグイン経由で画像を呼び出せないので)
  • 新機能として、オリジナルのサイズで画像を表示するオプションを実装しています。
    表示中に「o」キーを押すか、右下の「OriginalSize」リンクをクリックすることで原寸での画像表示に切り替わります。
    なお、原寸から縮小サイズに変更するのは面倒なので実装していません。
    (再度表示すると縮小表示になりますし(^^;)
  • ThickBox内でFlush(.swf)の表示に対応しました。
    と言ってもあんまりテストしてないので、うまく動かない可能性があります。
詳細は、アーカイブ内の*.patchファイルを読んでください。

また、全てのpaddingとmarginのデフォルト値が0になるのは困るけど、実装してみたい場合は「thickbox.css」の4行目を以下のように変更してください。

#TB_window *{padding: 0; margin: 0;}
#TB_overlay *{padding: 0; margin: 0;}
ただし、十分なテストはしてませんので、ブラウザによっては表示がおかしくなる可能性があります。
(特にHTMLをこれで表示した場合など・・・)

っていうか、ThickBoxってこの全称セレクタでの初期化が導入障壁になっている気がするんですが、何とかならん物ですかねぇ・・・

まぁ、以上のように導入はかなり面倒くさいのでほとんど実装する人居ないと思いますが、何かのお役に立てば幸いです。

あと、ThickBox3.1 for PukiWiki はthickbox.jsの59行目から63行目までのコメントアウトを外せば汎用的に利用できると思いますので、ThickBoxで原寸表示をさせたい場合やFlushの表示をさせたい場合に利用できるかも知れません。
(っていうか、これぐらいデフォルトで実装しておいて欲しいですが、まぁ、jQueryのデモなので使いづらいぐらいの方が改造≒jQueryの学習を促すことになって良いのかも知れません(^^;)

Posted by Takuchan at 2008年02月10日 22:10 | トラックバック(0)