RSS | Twitter | Facebook
Home » Javascript » LavaLamp for jQuery lovers!をWordPressに実装する : jQuery

LavaLamp for jQuery lovers!をWordPressに実装する : jQuery

LavaLamp for jQuery lovers! についてのメモ。

LavaLamp for jQuery lovers!
ページ下部にあるDownload itからデモを含むZip一式をダウンロードしておくと便利。
本記事はdemo.htmlのNo Imageを実装する際に躓いた点のメモ。

HTMLファイル

解凍したファイル一式に入っているファイルをHTMLのヘッダ部分で読み込む

<script src="http://www.creationlabs.net/wordpress/wp-content/themes/creationlabs/js/jquery-1.4.2.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="http://www.creationlabs.net/wordpress/wp-content/themes/creationlabs/js/jquery.easing.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="http://www.creationlabs.net/wordpress/wp-content/themes/creationlabs/js/jquery.lavalamp.min.js" type="text/javascript" charset="UTF-8"></script>

※2010.06.26時点のjQuery最新版「jquery-1.4.2.min.js」を「jquery-1.1.3.1.min.js」に変えて読み込んでいる
※HTMLファイルがUTF-8の場合はcharset=”UTF-8″は省略可能

LavaLamp for jQuery lovers! : jQuery

下記のナビゲーションを例に説明。

<ul id="nav" class="lavaLampNoImage ">
	<li><a id="item1" href="http://www.exsample.com">ホーム</a></li>
	<li><a id="item2" href="http://www.exsample.com/item2 ">項目1</a></li>
	<li><a id="item3" href="http://www.exsample.com/item2">項目1</a></li>
</ul>

大まかな流れ

LavaLamp for jQuery loversは上記ナビゲーションの最後に以下のような処理を行う


· li要素にcurrentクラスの設定がない場合、最初のli要素にcurrentクラスを追加する
例 <li class="current"><a id="item1" href="http://www.exsample.com">ホーム</a></li>
· <li class="back" ><div class="left"></div></li>

classが設定されたli要素を基点にしてbackクラスを設定したli要素が動く。マウスアウトした場合などはclassが設定されたli要素へbackクラスを設定したli要素が戻る。

ポイントはWordPressなどで動的にページを作成する場合、currentクラスを設定していないと最初のli要素にcurrentクラスが自動的に設定されて、通常の望む動作に鳴らない。

対策

  • WordPress側でアドレスに応じて動的にcurrentクラスを設定する。
  • JavaScriptで動的にcurrentクラスを設定する
  • JavaScriptで動的にcurrentクラスを設定

    (1) LavaLamp for jQuery loversが設定するcurrentクラス(最初のli要素に設定)を削除

    $("#nav li").each(function (i) {
    	$(this).removeClass("current");
    	var attrClass = $(this).attr("class");
    	if(!attrClass) {
    		$(this).removeAttr("class");
    	}
    });

    (2) 何らかの方法で目的のli要素にcurrentクラスを設定

    (3) LavaLamp for jQuery lovers!の初期処理

    $("#nav").lavaLamp({ fx: "backout", speed: 700 });

    このページの上へ移動

      Yahoo!ブックマークに登録    Google  この記事をクリップ!  BuzzurlにブックマークBuzzurlにブックマーク

    2010/6/27 日 | Javascript, jquery, library | 固定リンク |

    コメントはまだありません。

    コメントの投稿

    改行と段落タグは自動で挿入されます。メールアドレスは表示されません。
    利用可能な HTML タグ :
    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite="">
    <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    (必須)

    (必須)


    トラックバックURL

    このページの上へ移動