GIMC!YUGA（ギミック！優雅に）に発動！でご案内したyuga.jsですが
やはりMooToolsと競合を起こす事のお知らせと、
GIMICも諸事情によりリリースできないまま3ヶ月が過ぎてしまいました。
また具体的にどう組み込めば良いのかというお問い合わせも多いので
まとめて記事にします。
Geeklogのテーマに組み込む方法。
- サイトからyuga.jsをダウンロード
- ダウンロードしたyugaフォルダーをテーマに格納する。
- jquery.jsとthickbox.jsとyuga.jsをテーマに読み込ます。
＜ステップ１＞
配布サイトからyuga.jsをダウンロードします。
2010年1月8日現在の最新バージョンは0.7.1です。
＜ステップ２＞
解凍して出来たyugaファイルをテーマに組み込むのですが今回は分かりやすいように
「yugaフォルダー」ごとテーマに格納します。
＜ステップ３＞
使用するテーマのheader.htmlの<header></header>内に
<link rel="stylesheet" href="{layout_url}/yuga/css/thickbox.css" type="text/css" media="screen"/>
を書き込みます。
使用するテーマのfooter.thtmlの</body>もしくは{googleanalytics}の直前に
<script type="text/javascript" src="{layout_url}/yuga/jquery.js"></script>
<script type="text/javascript" src="{layout_url}/yuga/thickbox.js"></script>
<script type="text/javascript" src="{layout_url}/yuga/yuga.js" charset="utf-8"></script>
を書き込みます。
この段階で後はサイトの解説に従いリンクを指定したりページを作ればいいのですが
メディアギャラリーに使われているMootoolsや他のJavascriptライブラリーを
使うのであれば競合回避しなければなりません。
方法はfooter.thtmlに書き込む内容を
<script type="text/javascript" src="{layout_url}/yuga/jquery.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;
</script>
<script type="text/javascript" src="{layout_url}/yuga/thickbox.js"></script>
<script type="text/javascript" src="{layout_url}/yuga/yuga.js" charset="utf-8"></script>
に変更します、これは一言で言うと競合回避するために「$」を「j$」に変更しますと言う意味です。
詳しい解説はこちらでご確認ください。jQuery日本語リファレンス
さらにthickbox.jsとyuga.jsの「$」を「j$」に置換しなければなりません。
この時「$」ではなく「$(」で置換します。
この対策後はjQueryを使う際、同様に置換しなければならない事を覚えておいて下さい。
＜忘れずに！＞
危うく書き忘れそうになったのですがthickbox.jsの「loadingAnimation.gif」のアドレス変更を
しなければなりません。
var tb_pathToImage = "http://サイトアドレス/layout/テーマ名/yuga/img/loadingAnimation.gif";
これを指定しとかないと画像を読み込むアニメーションが表示されません。
私の場合はなぜか相対アドレスではうまくいかなかったのですが一度ご確認ください。
開発者のkyosukeさんには感謝です。
