WOW SliderでjQueryを使ったスライドショーを作成

WOW SliderでjQueryを使ったスライドショーを作成

(2013.01.11作成)
WOW Slider 2.8でjQueryを使った自動切換えバナーを作成した。
 
<成績>
WOW Sliderは、テンプレート、トランジションや表示時間の選択という簡単な操作で高度なウェブスライドショーを作成出来、既存ページ内の任意の部分に挿入する事が可能だ。
「スマートフォンサイト制作 ハンドブック」から借用した「自動切換えバナー」サンプルでは、Androidは 画像切り替えボタンが上手く機能しなかったが(こちらを参照)、このソフトで作成したら Intel Macの safariも含め、いずれのディバイスでも問題なく作動した。
 
=以下、使用方法は「k本的に無料ソフト・フリーソフト」さんから引用=
なお、桃色の*説明文は、筆者が加筆した

jQuery で動作するスライドショーを一発生成!「WOW Slider」。
WOW Slider
WOW Slider スクリーンショット
スクリーンショット
制作者 WOWSlider.com
対応 -

ダウンロード(E メール入力必須)
*実在しないダミーアドレスでも可能

jQuery で動くスライドショーを、超簡単な操作で作成することができるソフト。
ドラッグ&ドロップで放り込んだ画像ファイルを元に、スタイリッシュでエフェクト感のあるスライドショーを 手軽に作成することができます。
基本的に、素材画像 / スライドショーのテンプレート / トランジション効果 (画像の切り替え効果) の種類 / 出力サイズ 等を指定するだけで使えるようになっています。

「WOW Slider」 は、超簡単に使えるスライドショービルダーです。
ドラッグ&ドロップで放り込んだ画像ファイルを元に、jQuery で動くエフェクト感たっぷりなスライドショーを 作成することができる... というシンプル (だけど高性能) なスライドショー作成ツールです。
(スライドショーは、Flash なしの環境でも再生できます)
 デモギャラリー
操作は基本的にテンプレートを選ぶだけで、インターフェースも (7 割くらい) 日本語に対応しているので 結構使いやすいです※1
※1 テンプレートは、全部で 16 種類ある(バージョン 2.3 )*v2.8では 24種類
一応、

  • (スライドショーの) 自動再生のON / OFF
  • サムネイルプレビュー機能のON / OFF
  • スライドショー本体のサイズ
  • 画像切り替え効果の種類※2
等のオプションを設定できるようになっています。
※2 全部で 13 種類ある。 *v2.8では 14種類
素材として使えるのは、bmp / dib / rle / jpg / jpeg / jpe / jfif / gif / emf / wmf / tif / tiff / png / ico 形式の 画像ファイル。

使い方は以下のとおりです。

    ダウンロード
  1. 「WOW Slider」 をダウンロードするには、メールアドレスの入力が必要です。
    ダウンロード先のページ
    • Your Name - 名前
    • Your Email - メールアドレス
    入力 し、「DOWNLOAD NOW!」 ボタンをクリックします。
  2. するとダウンロードリンクが表示されるので、「wowslider-win-setup.zip」 をダウンロードします。
    日本語化
  1. 「WOWSlider.exe」 を実行します。
  2. メニューバー上の 「Options」 → 「Language」 から 「Japanese」 を選択します。

  3. 素材の設定
  4. スライドショーの素材としたい画像ファイルを、画面中央にドラッグ&ドロップします。
  5. リストに追加された画像を選択し、下部の欄で画像の
    • タイトル - スライドショー内で表示される画像のタイトル
    • Add Description - スライドショー内で表示される画像の説明
    • URL - 画像をクリックした時にジャンプするURL
    • Target - URL の開き方
    といったオプションを設定しておきます。
    (必要な場合のみ)

  6. スライドショーの設定
    よくわからなければ、そのままでもOK です。
  7. ツールバー上の プロパティ ボタンをクリック。
  8. スライドショーの プロパティ画面 が表示されます。
    ここで、
    • 作成するスライドショーのタイトル
    • 自動でプレイ (再生) させるかどうか
      • Pause on mouseover - マウスオーバーで一時停止させる
      • Stop slideshow after one loop - ループ再生はさせない
    • (素材画像の) 説明を表示させるかどうか
    • 戻る / 次へ ボタンを表示させるかどうか
    • ブレット※3 を表示させるかどうか
    • Filmstrip - ブレットの代わりにサムネイルのスライドパネルで表示
    • Remove frame and shadow - スライドショー本体に、フレームと影を付けない
    • On-demand image loading - 画像は、要求があった時に読み込む
    • Use default page color - 背景には、デフォルトの背景色を適用する
    • Use relative path to image in project※4  - 画像は相対パスで指定する?
    といったオプションを設定しておきます。
    ※3 画像選択ボタンのようなもの。
    ※4 このオプションのチェックON / OFF 時での違いが分かりませんでした...

  9. スライドショーの設定 2
  10. 続いて、画面上部の イメージ ボタンをクリック。
  11. スライドショーのスタイル等に関する設定画面 が表示されます。
    最初に左上の 「テンプレート」 欄で、作成するスライドショーのスタイルを選択します。
    (任意のスタイルを選択すると、該当スタイルのプレビューが左下に表示される)
  12. 次に、右側の欄で
    • イメージサイズ - スライドショー本体のサイズ
    • 保存の縦横比率 - 素材画像のアスペクト比を維持するかどうか
    • 小さいイメージを拡大させるかどうか
    • 大きなイメージを縮小させるかどうか※5
    • イメージの品質
    • トランジションエフェクト - 画像を切り替える際のエフェクト効果
    • スライドショーの間隔時間 - 画像一枚あたりの表示時間
    • 効果重複時間 - トランジションエフェクトにかける時間
    といったオプションを設定しておきます。
    (フリー版では、「WOWSlider.com」 の透かしを外すことができません)
    ※5 縮小させない場合、画像はスライドショーのサイズに合わせてトリミングされる。

  13. スライドショーの出力
  14. 最後に、画面上部の 書き出し ボタンをクリックします。
  15. スライドショーの出力設定画面 が表示されます。
    ここで、スライドショーの出力先を設定し、右下の 「書き出し」 ボタンをクリックすればOK です。
    出力先として 「ページに挿入」 を選択した場合、続けて 挿入先選択画面 が表示されます※6
    ※6 挿入先となるファイルの文字コードは、UTF-8 でなくてはならない?模様。
    (EUC / Shift_JIS / Unicode の場合、テキストが文字化けする&まともに保存されない)
    書き込み先のファイルがUTF-8 でない場合は、一時的に文字コードを変換しておくとよい。
    (メモ帳で開く → 「ファイル」 から 「名前を付けて保存」 で文字コードを変換できる)

    この画面が表示されたら、スライドショーの挿入先とする場所をクリック※7 → 画面下部にある 「前に挿入」 ボタンをクリックし、それから 「書き出し」 ボタンをクリックします。
    (ページ内の任意の部分をクリックすると、該当の箇所が緑色でハイライトされる)
    ※7 スライドショーは、選択した箇所の直前に挿入される。
    プレビュー画面上では、スライドが 左寄せな感じで配置されたり他の要素に被ったりする感じ で 表示されるが、実際には中央寄せして綺麗に配置される。

  <追記>既存ページ内への挿入をやり直す方法
 
1)赤の記述部分を削除
 
<head>タグ内
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
 
 
 
<body>タグ内
<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/slide01.jpg" alt="slide01" title="slide01" id="wows1_0"/></li>


<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
 
2)作成されたフォルダ「data1」と「engine1」を削除