2010年12月19日


Shadowbox.js 3.0.3 の loading.gif の変更

急に、IE で見ている時に、loading.gif が消える際に背景が黒い四角で残るように
なったので、「IE が勝手にバグ発生?」とか思ったのですが、Microsoft に腹を立
てても問題は解決しないので、loading.gif の背景を透過にすれば改善されるはず
だと思って、調べてみると、loading 時の GIF を作成してくれるサイトがありまし
た。

Ajaxload - Ajax loading gif generator



サイズは、24x24 なので、Indicator lite でぴったりです。これを Shdowbox の
loading.gif に置き換えるだけでうまくいきます。


---------------------------------------------------------

「他に無いかな・・・」

と探してみたらなんだかそっくりのがあったのですが、こちらはスピードを指定
できます。そのかわり画像サイズが右クリックで解らないので ダウンロードリン
クがただの画像リンクなのでそちらで見ます。

Web Script Lab ≫ Ajax Loading Gif Generator



posted by at 2010-12-19 12:53 | Comment(0) | Shadowbox | このブログの読者になる | 更新情報をチェックする

2010年11月22日


Shadowbox.js 3.0.3 の正統な使い方 〜 flv 動画を表示する

Shdowbox では、パッケージに JW Player の 4.5 が同梱されています。ですから、
flashVars のパラメータは、Setup Wizard | LongTail Video | Home of the JW Player
を参照して下さい。

一般的には、autoplayMovies を false にした時に表示する画像として image が
必要になり、その画像は動画が全て終了した時も使われます。もし、比較的長い動画
で autoplayMovies を true にするのならば、addCache では無く A タグのみ
で設置可能です。

※ autoplayMovies を false にする必要がある場合は、開いても真っ黒なので画像が
※ 必要になります。その場合は addCache を使います

他の flv プレーヤーを使いたい場合は、player.swf にリネームしたファイルと交換
するだけで利用できるはずです。
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js" charset="utf-8"></script>
<a id="sbx1290242586765" href="http://lightbox.on.coocan.jp/image/8377811.flv" title="甥っ子のソーラーバッタ"><img src="http://lightbox.on.coocan.jp/image/8377811.jpg" style='border:solid 0px #000000'></a>
<script type="text/javascript">
Shadowbox.addCache(document.getElementById("sbx1290242586765"),{
	player: 'flv', 
	width: 800,
	height: 600, 
	autoplayMovies: false,
	flashVars: { 
		image: 'http://lightbox.on.coocan.jp/image/8377811.jpg'
	}
});
</script>

<a rel="shadowbox;width=800;height=600;" title='甥っ子のソーラーバッタ' href="http://lightbox.on.coocan.jp/image/8377811.flv"><img src="http://lightbox.on.coocan.jp/image/8377811.jpg" style='border:solid 0px #000000'></a>
addCache





HTMLのみ





Shadowbox.js 3.0.3 の正統な使い方

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


posted by at 2010-11-22 17:37 | Comment(6) | Shadowbox | このブログの読者になる | 更新情報をチェックする

Shadowbox.js 3.0.3 で Windows Media Player を正しく使えるように、stretchToFit オプションを追加する

Windows Media Player で実装すると、wmv とか mpeg は、サイズ指定をしても
その中にオリジナルサイズで表示されるだけで間抜けな表示になるので、エディ
タで二ヶ所変更します。
一つ目の変更前
params={autostart:opt.autoplayMovies?1:0}
一つ目の変更後
params={autostart:opt.autoplayMovies?1:0,stretchToFit:1}
さらに、Firefox や Google Chrome で正しく表示するには
Firefox アドオン - プラグイン | Mozilla Japan より Firefox 用
のプラグインをインストールする必要があります。また、Shadowbox が内部で
指定している mime では stretchToFit が使え無いので video/x-ms-wmv を
application/x-ms-wmp に変更する必要があります

バラメータの一覧は以下のページにあります
(stretchToFit の適用について書かれています)

PARAM Elements in an OBJECT Element (Windows)




補足情報

Embedding the Player Control in a Web Page Displayed by Firefox (Windows)

Firefox では type 属性に 以下のいずれかの mime を設定する必要があります
application/x-ms-wmp 
application/asx 
video/x-ms-asf-plugin 
application/x-mplayer2 
video/x-ms-asf 
video/x-ms-wm 
audio/x-ms-wma 
audio/x-ms-wax 
video/x-ms-wmv 
video/x-ms-wvx 
Using PARAM Elements in a Web Page Displayed by Firefox (Windows) Microsoft の サンプルでは以下のようになっていますが、 object 要素の data 属性でも ファイルを指定できるようです。
<OBJECT id="Player" type="application/x-ms-wmp" width="300" height="200">
  <PARAM name="url" value="c:\MediaFiles\seattle.wmv" />
  <PARAM name="autostart" value="true" />
</OBJECT>
Shadowbox.js 3.0.3 の正統な使い方

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



posted by at 2010-11-22 01:13 | Comment(0) | Shadowbox | このブログの読者になる | 更新情報をチェックする

2010年11月21日


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,"&quot;");
		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 を正しく使えるようにする




posted by at 2010-11-21 18:56 | Comment(0) | Shadowbox | このブログの読者になる | 更新情報をチェックする

Shadowbox.js 3.0.3 の正統な使い方 〜 YouTube の動画を表示する

※ 2010/11/23 追記

記事の最後に shdowbox.js の変更が必要な内容について記述しています。
※ Google Cheome のみの問題の対処です
Shadowbox をブログに前もって組み込む必要の無いコードを作成するツールを用意しました。 と言っても、結局私のサイトの Shdowbox を使用するだけなのですが、あちこちのブログで テストして正しく動いています。 YouTube の場合、動画ID で構成される特定の URL は、flv を再生する為のプレイヤーな ので通常のYouTubeのオブジェクト埋め込みが表示されます。 rel で、player=swf と指定していますが、無くても動作します。 rel で指定できるのは、player、width、height です。title は A 要素の title 属性 で指定します。( gallery ももちろん指定できます ) ※ Shdowbox の rel での識別は shdowbox か lightbox です。
動画コード取得ツール
上のツールは以下のコードをブログの本文等に書くだけで、たいていは設置できると思います。
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/createShadowbox.js" charset="utf-8"></script>

設置ツールのソースコード
if ( !window['lightboxTool'] ) {
	window.lightboxTool = {};
}
if ( !window.lightboxTool.createShadowboxHtml ) {
	window.lightboxTool.createShadowboxHtml = function ( obj ) {
		var pn = obj.parentNode;
		var ip = pn.getElementsByTagName("INPUT")[0];
		var tt = pn.getElementsByTagName("INPUT")[2];
		tt.value = (tt.value).replace(/\"/g,"&quot;");
		var sl = pn.getElementsByTagName("SELECT")[0];
		var sz = pn.getElementsByTagName("SELECT")[1];
		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=\"http://www.youtube.com/v/"+ip.value+"\" title=\""+tt.value+"\"><img src=\"http://img.youtube.com/vi/"+ip.value+"/"+sl.value+".jpg\" style='border:solid 0px #000000'></a>";
		target.innerHTML = str;
		if ( tt.value != '' ) {
			Shadowbox.addCache( document.getElementById(idstr), eval( "({"+sz.value+",title:\""+tt.value+"\"})" ) );
		}
		else {
			Shadowbox.addCache( document.getElementById(idstr), eval( "({"+sz.value+"})" ) );
		}
		var param = sz.value.replace(/\\/g,"").replace(/:/g,"=").replace(/,/g,";").replace(/\"/g,"");

		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"+";"+ param + "\"" );
	}
}
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+="<div> \n";
str+="動画ID <input type=\"text\" value=\"uxBFiU2N65c\"> \n";
str+="サムネイル番号 \n";
str+="<select onchange='lightboxTool.createShadowboxHtml(this);'> \n";
str+="<option value=\"0\">0</option> \n";
str+="<option value=\"1\">1</option> \n";
str+="<option value=\"2\">2</option> \n";
str+="<option value=\"3\">3</option> \n";
str+="</select> \n";
str+="<input type=\"button\" value=\"作成\" onclick='lightboxTool.createShadowboxHtml(this);'> \n";
str+="<br> \n";
str+="サイズ <select onchange='lightboxTool.createShadowboxHtml(this);'> \n";
str+="<option value='player:\"swf\",width:960,height:745'>960x745</option> \n";
str+="<option value='player:\"swf\",width:640,height:505'>640x505</option> \n";
str+="<option value='player:\"swf\",width:480,height:385'>480x385</option> \n";
str+="<option value='player:\"swf\",width:425,height:344'>425x344</option> \n";
str+="</select> \n";
str+="タイトル <input type=\"text\" style='width:280px;'> \n";
str+="<br> \n";
str+="<textarea style='width:480px;height:120px;' readonly onclick='this.select();'></textarea> \n";
str+="<div style='margin-top:5px;'></div> \n";
str+="</div> \n";
document.write(str);
})();

Shadowbox.js 3.0.3 の正統な使い方

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



※ 2010/11/23 追記

Google Chrome のみ 以下の変更をしないと、IFRAME のコンテンツが表示を邪魔
してしまいます。エディタで一ヶ所変更します。
変更前
flashParams:{bgcolor:"#000000",allowfullscreen:true}
変更後
flashParams:{bgcolor:"#000000",allowfullscreen:true,wmode:"transparent"}


posted by at 2010-11-21 18:19 | Comment(0) | Shadowbox | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します