オリジナルのpukiwikiでは 画像をクリックすると 黒バックにただ画像が表示されるだけで その画像を消すにはブラウザの戻るボタンをクリックする。今どきのサイトとして 「これは無いよな」って思って クリックすると画像がポップアップするように改造してみました。
画像のポップアップ機能を実現させる為に lightbox2をインストールします。pukiwikiサイトに導入する方法を簡単に説明します。
まず lightbox2のサイトにアクセスして 必要なプログラムをダウンロードしてください。もう少し具体的に書くと トップページの参考画像の下に英語でインストール方法が紹介されています。その１．の項に Github Releases page.のリンクがありますからこれをクリックしてダウンロードページに移ります。 最新バージョンのSource code (zip)をダウンロードしてください。
pukiwikiサイトのskin/ディレクトリへ ダウロードしたZIPファイルの中の distディレクトリの下にある css,images,jsの３のディレクトリとその中のファイルをコピーしてください。 私は分かりやすくする為に lightbix2のディレクトリを作って その下へコピーしました。
次にlightbox2のプログラムを読み込む為に スキンファイルを書き換えます。skin/pukiwiki.skin.phpを開いて 以下の３行を追加してください。追加する場所は </head>タグのすぐ上辺りが良いかと思います。私は そこへ入れました。
<link rel="stylesheet" href="skin/lightbox2/css/lightbox.css">
<script src="skin/lightbox2/js/lightbox-plus-jquery.js" type="text/javascript"></script>
<script src="skin/lightbox2/js/lightbox.js" type="text/javascript"></script>
次にイメージを表示するrefプラグインを改造します。改造の必要な場所は２か所でした。
// オリジナルの238行目辺り
// $params['_body'] = '<a href="' . $url . '">' . $url . '</a>';
// 改造後
$params['_body'] = '<a href="' . $url . '" rel="lightbox[aiueo]" >' . $url . '</a>';
// オリジナルの354行目辺り
// $params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";
// 改造後
$params['_body'] = "<a href=\"$url2\" title=\"$title\" rel=\"lightbox[aiueo]\">{$params['_body']}</a>";
以上でインストールは終了です。画像がグニューッと拡大しながら表示されるようになりました。
参考URL: pukiwiki1.5.xにLightboxを導入する 【jQuery】これだけで完璧に導入できる［Lightbox］の実装方法。