Amazing Sliderで試作した jQueryスライダー

From Xserver

多彩なスキンや画面切り替えはカスタマイズ可能で見栄えもマズマズだ。
WOW Slider 7.0と比較すると（「WOW Sliderで...プレイリスト表示」を参照)、カスタマイズ出来る項目が豊富すぎて ”写真のパン&ズーム演出”や ”説明文字のモーション表示”は可能なのか分からないが、残念ながら ”楽曲BGMの挿入”は出来ない。
Firefox, Operaはスライドショー可能だが、何故か？LightBoxでのビデオ再生が出来ない。

入手先：Amazing Sliderは、こちらから入手（今回は、Amazing Slider 4.5を使用)。
使い方は、「jQueryスライダーチュートリアル」ないし「Amazing Slider - FC2」を参照。
先ず、動画（今回は、スペイン旅行の動画：720x408, H.264圧縮MP4)とそのプレビュー用画像をローカルに準備する。
＜注意＞日本語フォルダ内の画像を使うとパブリッシュ出来ないと云う。 パブリッシュで出力されるファイル名はそのまま元の名が使われるので、英語で準備する事。
起動画面で、(1)[スライド追加]ボタンをクリック。

1)

スライド追加（Add slides)
「スライド追加」画面で、スライドのサイズを設定しておいて（今回は、640x360)、[Add video]ボタンをクリック。
「Add video」画面で、画像と動画を読み込む（レンタルサーバ保存のビデオを http://kakonacl.xsrv.jp/spain/...mp4で読み込む事は出来ない)。

下段の「スライド内容」項目にタイトル、詳細（説明コメント)を記入し、
text effect：18種類から今回は Gray boxを選択しようとしたが文字のサイズを設定出来ないので、スキンオプションのテキスト効果で設定する事とする。
autoplay interval：3000msに設定。
「クリックしてウェブリンクを開く」項目：最初の”オープニングムービー”のみ [ウェブアドレスを開く]とせずに、[Lightboxで現在のビデオまたは大きなサイズの画像を開く]とした・・・パブリッシュ時に指定し出力したフォルダ内のビデオ又は画像が開かれる（ [Lighrtboxサイズ設定]を 640x360とした)。

2)

スキン
スキン 37種類から、今回は「Light」を選択。

c) 境界線と影（Border and shadow)で、Boder 4→0、[影表示]と[株の影表示]をチェック。

d) 背景の [リボン画像表示]で自分のロゴの追加が可能だが、無料版では右上のウォーターマーク「Free Version」を削除出来ない。

3)

トランジション効果（Transition effects)
トランジション効果 10種類より選択。少々カスタマイズ可能。
・[スライド]時間(分)： 1000→3000に変更　＊分の訳は、ミリ秒の間違い。
＊クロスフェードにするには、「クロスフェード」でなく、「フェード」を選択。「クロスフェード」を選択するとフェードアウトとフェードインが別になる。と云う。

4)

再生設定（Playback options)
・スライダーオプションで、[スライダーに必要な上下余白を追加する]と[Create a responsive slider]にチェック。
・自動再生インターバル（一枚の写真の表示時間、ミリ秒)：5000 →3000に変更。

5)

パブリッシュ
Publish to folder：保存フォルダを指定し、ファイルネームを記入して出力。
＊スライダーIDは、ページに複数のスライダーを入れる場合に違うものとする。

　6)出力されたHTMLファイルの編集・修正

1)

2)

3)