Shadowbox.js 3.0.3 の正統な使い方 〜 大きな画像を表示する

Shadowbox をブログに前もって組み込む必要の無いコードを作成するツールを用意しました。
( lightbox.on.coocan.jp で 3.0.3 をホスティングしています )

Shdowbox は、ブラウザの表示領域をこえるような大きさの画像でも、自動的に良い程度
の大きさに変更してくれます
( オプションを指定すると、オリジナルサイズでドラッグして見る事ができます )

画像用コード取得ツール

上のツールは以下のコードをブログの本文等に書くだけで、たいていは設置できると思います。

<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/createShadowboxImage.js" charset="utf-8"></script>

とても大きな画像をオリジナルのままの大きさで表示してドラッグさせるには、
rel だけでは指定出来ないので、rel を書かずに JavaScript で直接登録します。

rel を使わずに、addCache でセットアップする方法

<a id="sbx1290335243203" href="http://lh5.ggpht.com/_IzfbcNjqGuE/TM6GjyQ77AI/AAAAAAAABDU/gEJkgLsyhxs/P1000776.JPG" title=""><img src="http://lh3.ggpht.com/_IzfbcNjqGuE/TM6Io8o9edI/AAAAAAAABD4/AZXCuHAhzgw/P1000776.JPG" style='border:solid 0px #000000'></a>
<script type="text/javascript">
Shadowbox.addCache(document.getElementById("sbx1290335243203"),{
	title: '実際の大きさです', 
	handleOversize: "drag"
});
</script>

設置ツールのソースコード

if ( !window['lightboxTool'] ) {
	window.lightboxTool = {};
}
if ( !window.lightboxTool.createShadowboxHtmlImage ) {
	window.lightboxTool.createShadowboxHtmlImage = function ( obj ) {
		var pn = obj.parentNode.parentNode.parentNode;
		var ig= pn.getElementsByTagName("INPUT")[0];
		var sm = pn.getElementsByTagName("INPUT")[2];
		var tt = pn.getElementsByTagName("INPUT")[3];
		tt.value = (tt.value).replace(/\"/g,""");
		var tx = pn.getElementsByTagName("TEXTAREA")[0];
		var target = pn.getElementsByTagName("DIV")[0];
		var str="";
		var idstr = "sbx" + (new Date()).getTime();
		str+="<a id=\""+idstr+"\" href=\""+ig.value+"\" title=\""+tt.value+"\"><img src=\""+sm.value+"\" style='border:solid 0px #000000'></a>";
		target.innerHTML = str;
		if ( tt.value != '' ) {
			Shadowbox.addCache( document.getElementById(idstr), eval( "({title:\""+tt.value+"\"})" ) );
		}
		else {
			Shadowbox.addCache( document.getElementById(idstr), {} );
		}

		var str2="";
		str2+="<"+"script type=\"text/javascript\" src=\"http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js\" charset=\"utf-8\"></"+"script>\n";

		tx.value = str2 + str.replace("<a", "<a rel=\"shadowbox\"" );
	}
}
if ( !window.lightboxTool.initShadowbox ) {
	window.lightboxTool.initShadowbox = function ( ) {
		Shadowbox.init();
	}
}

(function() {
var str;
if ( !window.Shadowbox ) {
	str="";
	str+="<link rel=\"stylesheet\" type=\"text/css\" href=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.css\"> \n";
	str+="<"+"script type=\"text/javascript\" src=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.js\" charset=\"utf-8\"></"+"script> ";
	document.write(str);

	if (window.attachEvent){
		window.attachEvent('onload', lightboxTool.initShadowbox );
	}
	else {
		window.addEventListener('load', lightboxTool.initShadowbox, false);
	}
}
})();

(function() {
var str;
str="";
str+="<table> \n";
str+="<tr><td>大きい画像</td><td><input style=\"width:350px\" value=\"http://lh5.ggpht.com/_IzfbcNjqGuE/TM6GjyQ77AI/AAAAAAAABDU/gEJkgLsyhxs/P1000776.JPG\"> <input onclick='lightboxTool.createShadowboxHtmlImage(this);' value=\"作成\" type=\"button\"></td></tr> \n";
str+="<tr><td>小さい画像</td><td><input style=\"width:350px\" value=\"http://lh3.ggpht.com/_IzfbcNjqGuE/TM6Io8o9edI/AAAAAAAABD4/AZXCuHAhzgw/P1000776.JPG\"></td></tr> \n";
str+="<tr><td>タイトル</td><td><input style=\"width:350px\"></td></tr> \n";
str+="<tr><td colspan='2'><textarea style=\"width:480px;height:120px\" onclick='this.select();' readonly></textarea></td></tr> \n";
str+="<tr><td colspan='2'><div style='margin-top:5px;'></div></td></tr> \n";
str+="</table> \n";
document.write(str);
})();

Shadowbox.js 3.0.3 の正統な使い方

(1) ダウンロード、setup メソッドで事前にギャラリーを定義
(2) YouTube の動画を表示する
(3) 大きな画像を表示する
(4) Windows Media Player を正しく使えるようにする