• かちびと.net

    Webサイトツアーを手軽に実装出来るクロスブラウザ対応のjQueryプラグイン・Joyrideのご紹介。なかなか汎用的で使いやすいです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services