CS-Cart jQuery Cycle Plug-in設定アドオンリリースします

動画キャプチャアップしました。
(動きが忠実にキャプチャできていません。実際はもっと滑らかにエフェクトがかかります)
2011-07-21_2220

画像スライドショーを行うjQuery Plug-inは数知れずありますが、今回jQuery Cycle Plug-inを利用したスライドショーの管理アドオンとして「jQuery Cycle Plug-in設定アドオン」をリリースします。

スライドショーに使う画像自体は、バナーアドオンから登録します。
また、ブロックで使うバナー用テンプレートは「オリジナル」というものが用意されているのですが、jQuery Cycle Plug-in設定アドオンではここに「スライドショー」というテンプレートを追加します。(もうひとつシンプルなテンプレートも追加します。)

アドオンの管理画面ではjQuery Cycle Plug-inの各種設定を行います。

つまり、バナーブロック用のテンプレートの追加でスライドショーを実現し、各種エフェクトの設定をアドオンで管理するものになります。

管理画面から設定できる項目は以下の通りです。

  • エフェクト種の選択
  • タイムアウト時間の設定(画像が切り替わるまでの時間 ミリ秒 =1/1000秒)
  • エフェクト時間の設定(エフェクトにかかる時間)
  • 一時停止設定(マウスオーバーでスライドショーを一時停止するか否か)

jQuery Cycle Plug-inで用意されているエフェクトの数は28種あります。
このアドオンでは複数のエフェクトを組み合わせることはできませんが、いずれ対応しようとは思っています。

また、jQuery Cycle Plug-inでは実際にはもっと多くの設定を変更することができますが、今回は上述の制御のみをアドオンで行うことにしました。(要望があれば追加します)

なお、ブロック用テンプレートは現在2種用意しています。
ひとつはスライドショーとなるメイン部と、バナー4種をその横に配置する下記画像のようなタイプ。
もうひとつはスライドショーのみを表示するシンプルなテンプレートとなります。

上記の「サイドバナー」、メインスライドショーに使う画像は全て「バナーアドオン」より登録し、ブロックの設定で表示するバナーをその中から指定する形です。
(これはデフォルトのバナーの扱いと同じで、使用するテンプレートを当該アドオンのものに変更することでスライドショーが実現できます。)

また、上記テンプレートのバナーの表示位置の制御は、テンプレート中で指定する「ブロック内アイテム」の「ポジション」順で行います。
数字の小さい方から4つが自動的にサイドバナーに表示されます。

メインスライドショーはブロック内アイテムの5番め以降のものが全て適用されます。

※オリジナルのテンプレートが欲しいという場合には別途有償対応させていただきますのでお気軽にご相談ください。

このアドオンを使うことで動きを使って訴求力を高めることができると思います。
また、サイト制作にかかる手間も省くことができますので多くのサイトで使っていただけたらと思います。