GIMC!YUGA(ギミック!優雅に)に発動!でご案内したyuga.jsですが
やはりMooToolsと競合を起こす事のお知らせと、
GIMICも諸事情によりリリースできないまま3ヶ月が過ぎてしまいました。
また具体的にどう組み込めば良いのかというお問い合わせも多いので
まとめて記事にします。
Geeklogのテーマに組み込む方法。
<ステップ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さんには感謝です。
この記事にはトラックバック・コメントがありません。
サイト管理者はコメントに関する責任を負いません。