ブログを公開する目的の一つに、撮影した画像を自分が観賞して楽しみ、と同時にサイト訪問者の方にも見てもらいたい、というのがあると思います。そして、公開するなら画像をただ並べるより、スライドショーやフェード表示でそれなりに美しく表示したいものです。
それでは早速、上のスライドショーとフェード表示を 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 投稿)に次のカスタムフィールド(名前:値)を設定します。
次に Superbox のフェード表示です。
Superbox は、a タグの rel 属性で「rel=”superbox[image]”」と指定すると、クリックされたときに href 属性で指定されたリンク先をウィンドウ表示します。この仕掛けを有効にするため、ページが読み込まれた最初に「jQuery.superbox()」を実行しなければなりません。
初期設定と合わせてそのプログラムを、「superbox.settings.522.js」ファイルに用意します。また、テーマに合わせたバックグラウンド表示のデザインを「superbox.custom.522.css」ファイルに用意します。
fuFade プラグインと同様に、当該ページ(or 投稿)に次のカスタムフィールド(名前:値)を設定します。
参照リンク
MTS jQuery Superbox Packプラグインの使用例 その1
FUFADE – SLIDESHOW AND GALLERY
fuFade Demonstration
WordPress を使っていると、特定の投稿やページで JavaScript を組み込んで実行させたり、CSSを読み込んでデザインに手を加えたい事がよくある。それらを行なう方法として、テーマの「function.php」に自分でフックして組み込むプログラムを追加すればよい。
ところが先ごろテーマを変更した際、それを行なった事をすっかり忘れていたため、投稿やページに組み込んだものが動作しなくなってしまった。そこで、このプラグインに同じことを行なう機能を追加した。そのバージョンが「mts-superbox-pack-0.5.1」だ。
利用方法は次の通り。
WordPress Ver.2.9.2, Ver.3.0.1
Download: [link_download_file filename=”mts-superbox-pack-0.5.1.zip”]
(100818)