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

ブログを公開する目的の一つに、撮影した画像を自分が観賞して楽しみ、と同時にサイト訪問者の方にも見てもらいたい、というのがあると思います。そして、公開するなら画像をただ並べるより、スライドショーやフェード表示でそれなりに美しく表示したいものです。

それでは早速、上のスライドショーとフェード表示を Superbox Pack プラグインを利用して、どのように設定しているか説明します。

最初に、Superbox Pack にはスライドショーを実行する fuFade、そしてウィンドウ表示する Superbox の、2つの jQuery プラグインを利用していることを覚えておいてください。これは、設定が fuFade と Superbox に対して必要であることを意味します。

HTML ソースは次の通りです。

<ul id="slideshow">
	<li><a href="http://web.mt-systems.jp/images/page/application/SANY0023.jpg" rel="superbox[image]"><img src="http://web.mt-systems.jp/images/page/application/SANY0023-300x225.jpg" alt="" title="" width="300" height="225" class="alignnone size-medium wp-image-520" /></a><a href="#" class="backbtn"><span>prev</span></a> <a href="#" class="nextbtn"><span>next</span></a></li>
	<li><a href="http://web.mt-systems.jp/images/page/application/RIMG0058.jpg" rel="superbox[image]"><img src="http://web.mt-systems.jp/images/page/application/RIMG0058-300x225.jpg" alt="" title="" width="300" height="225" class="alignnone size-medium wp-image-516" /></a><a href="#" class="backbtn"><span>prev</span></a> <a href="#" class="nextbtn"><span>next</span></a></li>
	<li><a href="http://web.mt-systems.jp/images/page/application/RIMG0208.jpg" rel="superbox[image]"><img src="http://web.mt-systems.jp/images/page/application/RIMG0208-300x225.jpg" alt="" title="" width="300" height="225" class="alignnone size-medium wp-image-518" /></a><a href="#" class="backbtn"><span>prev</span></a> <a href="#" class="nextbtn"><span>next</span></a></li>
	<li><a href="http://web.mt-systems.jp/images/page/application/RIMG0348.jpg" rel="superbox[image]"><img src="http://web.mt-systems.jp/images/page/application/RIMG0348-300x225.jpg" alt="" title="" width="300" height="225" class="alignnone size-medium wp-image-519" /></a><a href="#" class="backbtn"><span>prev</span></a> <a href="#" class="nextbtn"><span>next</span></a></li>
	<li><a href="http://web.mt-systems.jp/images/page/application/RIMG0126.jpg" rel="superbox[image]"><img src="http://web.mt-systems.jp/images/page/application/RIMG0126-300x225.jpg" alt="" title="" width="300" height="225" class="alignnone size-medium wp-image-517" /></a><a href="#" class="backbtn"><span>prev</span></a> <a href="#" class="nextbtn"><span>next</span></a></li>
</ul>

スライドショーの画像は、ul タグ の li タグ内に、img タグで表示画像を指定します。画像の切り替えボタンを設定するため、img タグの直後に a タグで back と next を準備してあります。ul タグに id=”slideshow” の属性を忘れずに設定して下さい。

画像の切り替えスピードは、JavaScript で初期設定用に「fufade.settings.522.js」ファイルを、表示のデザインは CSS で「fufade.custom.522.css」ファイルを、それぞれプラグインのディレクトリに登録しておきます。

fuFade プラグインをクライアント側に読み込ませるため、当該ページ(or 投稿)に次のカスタムフィールド(名前:値)を設定します。

  • mts-fufade:on
    jQuery と fuFade の js、css ソースを読み込むように指定する。
  • mts-fufade-settings:fufade.settings.522.js
    fuFade 初期設定のためのプログラムファイル名を指定する。
  • mts-fufade-custom:fufade.custom.522.css
    fuFade 表示デザインのための CSSファイル名を指定する。

次に Superbox のフェード表示です。

Superbox は、a タグの rel 属性で「rel=”superbox[image]”」と指定すると、クリックされたときに href 属性で指定されたリンク先をウィンドウ表示します。この仕掛けを有効にするため、ページが読み込まれた最初に「jQuery.superbox()」を実行しなければなりません。

初期設定と合わせてそのプログラムを、「superbox.settings.522.js」ファイルに用意します。また、テーマに合わせたバックグラウンド表示のデザインを「superbox.custom.522.css」ファイルに用意します。

fuFade プラグインと同様に、当該ページ(or 投稿)に次のカスタムフィールド(名前:値)を設定します。

  • mts-superbox:on
    jQuery と Superbox の js、css ソースを読み込むように指定する。
  • mts-superbox-settings:superbox.settings.522.js
    Superbox 初期設定のためのプログラムファイル名を指定する。
  • mts-fufade-custom:fufade.custom.522.css
    Superbox 表示デザインのための CSSファイル名を指定する。

参照リンク
MTS jQuery Superbox Packプラグインの使用例 その1
FUFADE – SLIDESHOW AND GALLERY
fuFade Demonstration

カスタムフィールドに登録したソースをヘッダへ組み込む

WordPress を使っていると、特定の投稿やページで JavaScript を組み込んで実行させたり、CSSを読み込んでデザインに手を加えたい事がよくある。それらを行なう方法として、テーマの「function.php」に自分でフックして組み込むプログラムを追加すればよい。

ところが先ごろテーマを変更した際、それを行なった事をすっかり忘れていたため、投稿やページに組み込んだものが動作しなくなってしまった。そこで、このプラグインに同じことを行なう機能を追加した。そのバージョンが「mts-superbox-pack-0.5.1」だ。

利用方法は次の通り。

  • JavaScript ソースの組み込み
    カスタムフィールド名を「mts-jssrc」とし、値に jQuery のソースを登録すると、WordPress に同梱された jQuery を読み込み、カスタムフィールドに登録したソースを HTML ヘッダに「<script type=”text/javascript”>」タグで囲んで組み込む。
  • JavaScript リンクファイル
    カスタムフィールド名を「mts-jslnk」とし、値に「http://」から始まる JavaScript ファイルの URL を登録すると、HTML ヘッダに「<script src=”http://…”>」タグでリンクの読み込みを挿入する。
  • CSS ソースの組み込み
    カスタムフィールド名を「mts-csssrc」とし、値に CSS のソースを登録すると、カスタムフィールドに登録した CSS ソースを HTML ヘッダに「<style type”text/css”>」タグで囲んで組み込む。

WordPress Ver.2.9.2, Ver.3.0.1
Download: [link_download_file filename=”mts-superbox-pack-0.5.1.zip”]
(100818)