MyBBの添付ファイル画像は、デフォルトでは別にウィンドウを開いて画像のみを表示する。これをlightbox風にポップアップで表示させたかったので、prettyPhotoを使ってみた。

環境

• MyBB 1.6.14
• prettyPhoto 3.1.5
• jQuery 1.11.1

インストール手順

1. MyBBをインストールしたディレクトリの下に「prettyphoto」という名前でディレクトリを作成する。
2. prettyphotoの下に、jQuery公式サイトより最新版の1.x系のjQueryをダウンロードし、ファイル名をjquery.jsに変更しておく。
3. prettyPhotoの公式サイトより最新版をダウンロードし、prettyphotoの下に展開する。
4. MyBB管理者CPの「テンプレート&スタイル」の「テンプレート」から使用中のテンプレートを選択し、「テンプレートを開く」。
5. グループ化されていないテンプレート > headerincludeを編集し、次の行を最後に追加する。

   <!-- prettyPhoto -->
   <link rel="stylesheet" href="{$mybb->settings['bburl']}/jscripts/prettyphoto/css/prettyPhoto.css">
   <script src="{$mybb->settings['bburl']}/jscripts/jquery.min.js"></script>
   <script src="{$mybb->settings['bburl']}/jscripts/prettyphoto/js/jquery.prettyPhoto.js"></script>

6. フッタテンプレート > footerをを編集し、次の行を最後に追加する。

   <!-- pretthPhoto -->
   <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
    });
   </script>

7. 記事部品テンプレート > postbit_attachments_thumbnails_thumbnailを編集し、リンク部分の記述に次のように「rel=”prettyPhoto”」を追加する。

   <a rel="prettyPhoto" href="attachment.php?aid={$attachment['aid']}" target="_blank">

添付ファイルのある記事で、添付ファイルがlightbox風に表示されるのを確認する。