※ 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,""");
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
|
Shadowbox
|

|