LinkFromParent.js

LinkFromParent.jsはa要素を含むdivを指定する事より、親要素全体をリンクボックスとして使用するjQueryプラグインです。
同様の物にはBiggerlinkやBigTarget等がありますが、いずれもwindow.locationを使用してリンクを設定しているようです。
このため、lightboxやsuperboxの様にrel属性を使用する場合や、target属性を使用したい場合には使えません。
LinkFromParent.jsでは内包する要素と同じアンカータグを持った透過gifを埋め込むため、rel属性、target属性、title属性を使用できます。

lightbox_Demo

superbox_Demo

Target_Demo

指定先iframe

• ダウンロードしたファイルから"js/LinkFromParent.js"、"css/LinkFromParent.css"、"images/dummy.gif"をアップロードします。
• htmlのヘッダーでjQuery及び"LinkFromParent.js"、"LinkFromParent.css"を読み込みます。

<link rel="stylesheet" href="css/LinkFromParent.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="js/LinkFromParent.js"></script>

• htmlファイルにaタグを含むdivを作成します。

<div class="ParentBox">
	<a href="http://google.com">Google</a>
</div>

• リンクを設定する要素にLinkFromParentを設定します。

$(function(){ 
	$(".ParentBox").LinkFromParent();
});

このサンプルではprototypeとの衝突を防ぐため、別ファイルにして下記のように記述しています。

jQuery.noConflict();
	jQuery(function(){ 
	jQuery(".ParentBox").LinkFromParent();
	});
	
	jQuery(function(){  
        jQuery.superbox();  
    });  

lightboxやsuperboxは後から読み込んでください。
ローカル環境でこのファイルをテストする場合は、lightbox、superboxを別途インストールしてください。

dummyImgSrc

"dummy.gif"のパス(初期値："images/dummy.gif")
"images/"をドメイン直下に置く場合は、
dummyImgSrc:"http://"+location.hostname+"/images/dummy.gif"
と指定してください。
これにより、下層ファイルでも同じ設定で使用できます。

$(function(){ 
	$(".ParentBox").LinkFromParent({
		dummyImgSrc:"http://"+location.hostname+"/images/dummy.gif"
	});
});

hover

マウスオーバーで背景色を変える(初期値：true)
hover時の色は"LinkFromParent.css"で変更して下さい。

.LFP_hover{
	background-color:#cccccc;
}

既知の問題

指定要素のpadding部分はリンクされません。 あまりpaddingを大きくしない様にして下さい。 指定要素の内部に２つ以上のリンクが含まれる場合は、二番目以降は無視されます。

バグの報告先

現在のバージョンはβ版です。
バグ報告は下記へお願い致します。
webmaster@photoartisan.jp

• LinkFromParent_v0.1(beta) 2011/5/18

MITとGPLのデュアルライセンス