• 2010年1月 8日(金) 03:28 JST
  • 投稿者:
    augebang
  • 閲覧数
    2,150

Geeklogでyuga.jsを使う方法

GIMC!YUGA(ギミック!優雅に)に発動!でご案内したyuga.jsですが
やはりMooToolsと競合を起こす事のお知らせと、
GIMICも諸事情によりリリースできないまま3ヶ月が過ぎてしまいました。

また具体的にどう組み込めば良いのかというお問い合わせも多いので
まとめて記事にします。

Geeklogのテーマに組み込む方法。

  1. サイトからyuga.jsをダウンロード
  2. ダウンロードしたyugaフォルダーをテーマに格納する。
  3. jquery.jsとthickbox.jsとyuga.jsをテーマに読み込ます。

<ステップ1>
配布サイトからyuga.jsをダウンロードします。
2010年1月8日現在の最新バージョンは0.7.1です。

<ステップ2>
解凍して出来たyugaファイルをテーマに組み込むのですが今回は分かりやすいように
「yugaフォルダー」ごとテーマに格納します。

<ステップ3>
使用するテーマのheader.htmlの

内に

を書き込みます。

使用するテーマのfooter.thtmlのもしくはの直前に



を書き込みます。

この段階で後はサイトの解説に従いリンクを指定したりページを作ればいいのですが
メディアギャラリーに使われているMootoolsや他のJavascriptライブラリーを
使うのであれば競合回避しなければなりません。

方法はfooter.thtmlに書き込む内容を




に変更します、これは一言で言うと競合回避するために「$」を「j$」に変更しますと言う意味です。
詳しい解説はこちらでご確認ください。jQuery日本語リファレンス

さらにthickbox.jsとyuga.jsの「$」を「j$」に置換しなければなりません。
この時「$」ではなく「$(」で置換します。
この対策後はjQueryを使う際、同様に置換しなければならない事を覚えておいて下さい。

<忘れずに!>
危うく書き忘れそうになったのですがthickbox.jsの「loadingAnimation.gif」のアドレス変更を
しなければなりません。

var tb_pathToImage = "http://サイトアドレス/layout/テーマ名/yuga/img/loadingAnimation.gif";

これを指定しとかないと画像を読み込むアニメーションが表示されません。
私の場合はなぜか相対アドレスではうまくいかなかったのですが一度ご確認ください。

開発者のkyosukeさんには感謝です。

トラックバック

このエントリのトラックバックURL:
http://gltmatrix.com/trackback.php/yugajsongeeklog

サイト管理者はコメントに関する責任を負いません。