Webサイトツアーを手軽に実装出来るクロスブラウザ対応のjQueryプラグイン・Joyride

何度か似たようなの見かけてますが、
サイト内ツアーを実装出来るjQuery
プラグイン・Joyrideです。高機能で
はありませんが、シンプルでなかなか
使い勝手も悪く無さそうでしたので
少し触ってみました。

何度か似たようなの見かけてますので珍しくはないともいますけど・・・個人的にどこかで使いたいのでメモ的に。ライセンスはMITです。

Joyride

ツールチップでナビゲーションが出ます。NEXTを押していけば勝手に進んでくれて、ツールチップのスタイルやコンテンツもマークアップで自由に作れるのが手軽でいいですね。

アニメーションのスピードやツールチップのデザイン、ボタンのテキストなども簡単に変更出来るようになっています。なかなか汎用的じゃないかなと。

いつも通りやっつけですけどサンプル用意しました。アクセスすればツアーが勝手にスタートします。

Sample

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript" src="jquery.joyride-1.0.js"></script>

普通に読み込めばいいだけ。

var settings = {
      'tipLocation': 'bottom', // ツールチップの場所'top'なら上
      'scrollSpeed': 300, // スクロールのスピード
      'timer': 0, // 自動で次セクションに進むまでのタイマー。0ならクリック式
      'startTimerOnClick': false, // ツアー開始をクリックにするか自動で進むか。trueならクリック式
      'nextButton': true, // nextボタンの指定が無いときの表示をどうするか、みたいな
      'tipAnimation': 'pop', // ツールチップ表示時のエフェクト'pop' か'fade'
      'tipAnimationFadeSpeed': 300, // エフェクトを'fade'にした時の表示スピード
      'cookieMonster': false, // cookieを使うかどうか
      'cookieName': 'JoyRide', // cookie名
      'cookieDomain': false, // cookieを使う時にドメインを指定 e.g.'http://example.com'
      'tipContainer': 'body', // inlineじゃない時の表示場所
      'inline': false, // inline配置のセッティング
      'tipContent': '#joyRideTipContent' // マークアップで<ol>に付加させたID名
    };

細かい設定はjquery.joyride-1.0.jsを開いて書き直します。

マークアップ

<ol id="joyRideTipContent">
  	  <li data-id="numero1" data-text="次へ進む" class="custom">
  	    <p>ツールチップ内に表示させるコンテンツ01</p>
  	  </li>
  	  <li data-id="numero2" data-text="次へ進む">
 	    <p>ツールチップ内に表示させるコンテンツ02</p>
  	  </li>
  	  <li data-id="numero3" data-text="次へ進む">
 	    <p>ツールチップ内に表示させるコンテンツ03</p>
  	  </li>
  	</ol>

これがツールチップになります。普通にマークアップするだけなのでリンクも画像も普通に使えます。data-textの中身がボタンのテキストになるので便宜変更してください。

<h4 id="numero3">昔の思い出</h4>

表示させる場所にdata-idで指定したID名を書けばいいだけ。

一応クロスブラウザで動作します。もちろん、IE6は別途cssの工夫が必要ですけど、動作自体には問題ありません。スクリプトは以下よりどうぞ。

Joyride