FindxFine

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

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

LavaLamp for jQuery lovers!
ページ下部にあるDownload itからデモを含むＺｉｐ一式をダウンロードしておくと便利。
本記事は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クラスが自動的に設定されて、通常の望む動作に鳴らない。

対策

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

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