Skitter SlideshowをWordPressで複数設置する。

先日、クライアントさんからスライドショーを設置してほしいとの相談がありました。
条件は画像をランダムに表示できる、複数のスライドショーを作る、この2点。

スライドショーはワードプレスのプラグインではいくつもあるのですが、条件に合うものはかなり少ない、
って言うか、画像をランダムに表示できるスライド・ショーはSkitter Slideshowのみです。

まずは、Skitter Slideshowのコードがどんな風になっているかチェックするために、とりあえずプラグインから作ってみます。
ユーザーインターフェースはビジュアル的に使いやすいです。

メディアライブラリに画像をアップロードして、「設定」から「Skitter Slideshow」の管理画面へ。
「Media Library」のタブで画像を選択、「more」をクリックすればスライド・ショーに画像が追加されます。

色々設定項目があるのですが、このようになっています。

Skitter Theme:スライド・ショーのテーマを選びます
Animation type：スライド・ショーの効果（アニメーションの効果）を選びます
Navigation type：ナビゲーションのタイプです。（なし、ドット、数字、サムネイルのどれか）
width px：スライド・ショーの横幅
height px：スライド・ショーの高さ
background：背景の色
crop image：画像を指定した大きさで切り取るかどうか
velocity：アニメーションの強さ
interval：画像が切り替わるタイミング（ミリ秒単位 1000なら1秒で切り替わる）
navigation：ナビゲーションの有無
numbers_align：数字をどこに表示するか（left,center,right）
label：ラベルを表示るかどうか
labelAnimation：ラベルのアニメーション効果の有無
width_label：ラベルの幅（ピクセル）
easing_default：アニメーションの進み具合（詳しくは→Easing function
animateNumberOut：マウスアウトの数字の色と背景{backgroundColor:’#000′, color:’#ccc’}
animateNumberOver：マウスホバーの数字の色と背景
animateNumberActive：数字にリンクが貼られいる場合の色と背景
hideTools：ツールを非表示にするかどうか
fullscreen：常時フルスクリーン表示にするかどうか
show_randomly：画像をランダムに表示するかどうか
enable_navigation_keys：ナビゲーションキーを許可するかどうか（？）
controls：制御ボタン（矢印）の表示、非表示
controls_position：制御ボタン（矢印）の位置（center, leftTop, rightTop, leftBottom, rightBottom）
focus：表示基準の有無
focus_position：表示基準の場所（center, leftTop, rightTop, leftBottom, rightBottom）
preview：プレビューするかどうか
stop_over：マウスホバーでスライド・ショーを止めるかどうか
with_animations：アニメーション効果を加える（’paralell’, ‘glassCube’, ‘swapBars’）
auto_play：自動的にスライド・ショーを始めるかどうか

これらの設定をしてコードがどうなっているか見ました。
[html]

[/html]

これが実際のコードです。この部分を投稿や固定ページに使えるようにしたのがこちらのコード。
[html]

[/html]

runphpなどのphpを使えるプラグインをインストール、有効にして、画像はテーマのimagesフォルダにアップすれば、このコードでいくつでもSkitter Slideshowを投稿や固定ページで使えます。
「class=”box_skitter” id=”wp_skitter”」ではCSSを書いてやれば、色々いじれそうです。
また、最後の方のscriptの設定を変えてやれば、スライド・ショーごとにスライド・ショーの効果などが変わります。