少し前にIDEA*IDEAさんで紹介されていた、「jQueryを使ってサイトツアーを作る方法」を試してみました。
まずはデモをご覧ください。下記リンクをクリックすると始まります。(本サイトのデモのほうが奇麗なので、そちらもご覧くださいね。
導入は以下の通り。
１.ダウンロード
以下のURLからファイルをダウンロードします。
http://tympanus.net/codrops/2010/12/21/website-tour/
左カラムイメージ下にあるDOWNLOADを押すと、WebsiteTour.zipがダウンロードできます。解凍するといくつかのフォルダにいくつかのファイルが入っていますが、必須ファイルは以下の通りです。（その他のファイルは、サンプルのindex.html用のCSSファイルと、jsでフォントを指定する為のファイルなので、動作には関係ありません。こちらも後日検討してみたいと思います。）
[css] jquerytour.css
[images] 各画像ファイル
[js] jquery.easing.1.3.js,myTour.js
これらを適当な場所にアップすれば、ファイルの準備は完了です。
画像へのパスはCSSからの相対パスで記述されています。上記構成通りにするか、変更する場合にはCSSの画像パスを書き換える必要があります。
２.HTMLへの記述
まず<head>内に以下を記述し、cssファイルとjsファイルを読み込みます。（パスは適宜読み替えてください）
<link rel="stylesheet" type="text/css" href="css/jquerytour.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
サンプルファイルにはこれ以外にも記述がありますが、それらはフォント指定の為のjsに関する記述で、今回は必須ではありませんので割愛します。
次に本文末尾（</body>タグの前）にツアーの表示部分となるスクリプトを記述します。本文に記載するにはいささか長いスクリプトだったので、今回僕はこの部分をmyTour.jsという外部ファイルにして読み込むようにしました。
<script type="text/javascript" src="js/myTour.js"></script>
jsファイルにリンクを張っておきますので、内容を参照しつつ以後読み進めてください。
http://www.lifeisg.com/blog/js/myTour.js
あとは本文に、実際ツアーとして紹介する部分を準備します。紹介したい箇所のボックスにclass指定を行い、それらのclass名をスクリプト中の’name’と対にして記述します。
<div class="tour_1">１</div> <div class="tour_2">２</div> <div class="tour_3">３</div> <div class="tour_4">４</div>
myTour.jsでは23行目からの記述がそれにあたります。
var config = [
{
"name":"tour_1",//表示位置のclass名を指定します
"bgcolor":"black",//背景色として指定する色です。element.styleとして記述されます
"color":"white",//文字色として指定する色です。element.styleとして記述されます
"position":"TL",//指定したclassに対するフキダシの表示位置です。
"text":"最初のフキダシです",//フキダシの中に表示するテキストです。
"time":5000//自動表示をオンにした場合の表示間隔です。
},
{
〜以下くりかえし〜
}
],
{ }単位で一つの吹き出しとなり、それらを書いた分だけフキダシが生成されます。それぞれのパラメータの対応はコメントの通りです。ツアーを自動で表示する場合はmyTour.js59行目のautoplay=の値をtrueにします。
以上で設置は完了です。
３．カスタマイズ
通常だと、サイトが読み込まれ次第ツアーが起動するようになっているのですが、今回はブログの一記事として書くのでそれはちょっと困ります。そこでツアー起動の呼び出しをコメントアウトして、呼び出しの記述を追加し、DEMOにリンクすることでツアーをスタートさせています。
ついでなので、そのカスタマイズを記しておきます。
まずmyTour.js68行目をコメントアウトします。これでサイトを開いた際にツアーが実行されなくなります。
//showControls();
次にmyTour.js74行目に以下の一文を追加します。
$('#showcontrols').live('click',showControls);
これは、showcontrolsをidに持つタグがクリックされた場合にshowControl（ツアー起動の関数ですね）を実行する、という命令です。この記述に対応する形で、DEMOにはid=”showcontrols”を設定しています。
これで、クリックによりツアーを始めることができるようになります。
以上、さらさらっと書きましたが、参考になれば幸いです。
※今回文章が長過ぎてどこにもふざけたことを書く余裕がありませんでした。残念。