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

投稿日 : 2010年6月27日 | 更新日 : 2011年10月07日 前のページへ戻る

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>

currentクラスを設定したli要素が基点となり、それに応じてbackクラスを設定したli要素が動く。マウスアウトした場合などはcurrentクラスを設定した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 });

JavaScript Library | 固定リンク | Comments (2)

関連記事

• masonryとjScrollPaneでグリッドレイアウト : jQuery
• 汎用性の高いナビゲーション系プラグイン : jQuery
• 汎用性が高いスライドショー系のjQueryプラグインのリンク集 : jQuery
• 良く利用するjavascriptライブラリなど : JavaScript
• ギミックが効いたスライドショー系のjQueryプラグインのリンク集 : jQuery

このページの上へ移動

このページの上へ