MTS jQuery Superbox Packプラグインの使用例 その１

ブログに掲載した画像を「大きくカッコ良く見せたいなぁ」と思っていたとき、Eastern Townships tourism Quebec サイトのトップページ右側にある「Share your photos & videos」リンクページで画像をクリックしたところ、綺麗な画像がカッコ良くフェード表示されたのを見て、自分もやってみたいと思ったのがプラグインを作るきっかけでした。

調べてみると、jQuery のプラグインで Superbox が使われていることが分かりました。で、WordPress でフレキシブルに利用できるようにと思い作った訳です。

ですがそのページではカッコ良く見せるために、いろいろと工夫が凝らしてあります。ここでは、提供されている Superbox に余り手を加えてありませんのでご容赦ください。

それでは見てみましょう。

上の HTML は次の通りです。

<table><tbody><tr>
<td style="border:0 none"><a href="http://web.mt-systems.jp/images/page/application/RIMG0321.jpg" rel="superbox
[mygallery]"><img src="http://web.mt-systems.jp/images/page/application/RIMG0321-150x150.jpg" alt="" title="" width="150" height="150" class="alignnone size-thumbnail wp-image-534" /></a></td>
<td style="border:0 none"><a href="http://web.mt-systems.jp/images/page/application/RIMG0303.jpg" rel="superbox
[mygallery]"><img src="http://web.mt-systems.jp/images/page/application/RIMG0303-150x150.jpg" alt="" title="" width="150" height="150" class="alignnone size-thumbnail wp-image-533" /></a></td>
<td style="border:0 none"><a href="http://web.mt-systems.jp/images/page/application/RIMG0271.jpg" rel="superbox
[mygallery]"><img src="http://web.mt-systems.jp/images/page/application/RIMG0271-150x150.jpg" alt="" title="" width="150" height="150" class="alignnone size-thumbnail wp-image-532" /></a></td>
</tr></tbody></table>

table タグは単純に横に並べたかったためで、Superbox の使用には関係ありません。

Superbox は、a タグの href 属性のリンク先を表示します。rel 属性で superbox

[mygallery] と指定することで、「mygallery」をグループとして Prev、Next による表示の切り替えを行うようになります。

Superbox を利用するときは当該ページのカスタムフィールドに必ず、「mts-superbox(名前)：on(値)」を登録してください。

画像は、WordPress のメディア機能を利用して 800×600 サイズの画像をアップロードして、HTML エディタからページに挿入して修正しています。

Superbox を利用するため、ページが読み込まれた最初に「jQuery.superbox()」を実行する必要がありますが、プラグインディレクトリに「superbox.settings.js」ファイルが登録されており、デフォルトで当該ファイルをロードするようになってます。また、バックグラウンド表示のデザイン指定もあり、同じく「superbox.custom.css」ファイルがデフォルトで読み込まれます。

これらは、WordPress の [管理画面]ー[プラグイン]ー[プラグイン編集] から「MTS jQuery Superbox Pack」プラグインを選択して、当該ファイルを編集することが可能です。

あるいは、当該ページのカスタムフィールドにファイル名を設定して読み込ませることができます。

Superbox を利用する際のカスタムフィールド(名前：値)は次の通りです。

  • mts-superbox：on
    jQuery と Superbox の js、css ソースを読み込むように指定する。
  • mts-superbox-settings：ファイル名
    superbox-settings.js の替わりに読み込むプログラムファイル名を指定する。
  • mts-superbox-custom：ファイル名
    superbox-custom.css の替わりに読み込む CSS ファイル名を指定する。

※ご注意
最後に注意点ですが、Superbox は rel 属性指定に

を使うため、WordPress の ショートコードとバッティングします。そのため本プラグインは Superbox を指定したページが表示される場合、 ショートコード機能を無効にします。同一ページで両方は使えませんので、お気を付けください。

また Superbox は、同じページで異なる設定ができません。もし、カテゴリ一覧などで Superbox を利用した複数のページが表示される場合は、最初に読み出された設定ファイルが有効となります。

参照リンク
MTS jQuery Superbox Packプラグインの使用例 その２
jQuery SuperBox