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

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

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

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

sketter

メディアライブラリに画像をアップロードして、「設定」から「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]

  • jQuery(window).load(function() { jQuery('#wp_skitter').skitter({ interval: 7000,  navigation: false,  label: false,  numbers: false,  hideTools: false,  fullscreen: false,  show_randomly: true,  numbers_align: "left",  enable_navigation_keys: false,  controls: false,  focus: false,  preview: false,  stop_over: false,  auto_play: true,  theme: "square" }); });
    [/html]

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

最初のコメントをしよう

必須